javascript - 通过调用函数将 Prop 传递给React类的正确方法

我有以下代码将renderTabs传递到共享组件。在共享搜索组件中，它回调传入的函数（即我的renderTabs）。我不知道如何正确设置SearchResults，我做错了。

我还将注意到，最初的renderTabs是容器内的函数，具有所有逻辑，但我将其移到了新组件上，以便在抽象后可以更轻松地对其进行维护。在此之前，Container.js中的renderTabs（）看起来像这样：

Web项目-使用和使用共享React项目中的Search.js

在我在Container.js中进行更改之前：

renderTabs() {
   ...bunch of logic

      return (
        <li key={paneId}>
          {item}
        </li>
      );
    });
    return (
      <div>
        <ul>{tabs}</ul>
      </div>
    );
  }

Container.js我现在已经将上面的内容抽象到了一个名为<SearchTabs />的新容器中。

  renderTabs() {
    const { selectedTab, selectedFilter, isDropdownOpen } = this.props;
    return (<SearchTabs
      fetchSearch={this.props.fetchSearch}
      isDropdownOpen={isDropdownOpen}
      onFilterClick={this.onFilterClick}
      selectedFilter={selectedFilter}
      selectedTab={selectedTab}
      setTab={setTab}
      resetNextPage={this.props.resetNextPage}
    />);
  }
 // We now pass the renderTabs callback to Search.js so that Search.js can call it (hence render the tabs) when it's ready to
 render() {
    return (
      <Search
        renderTabs={this.renderTabs}
      />
    );

Web Project使用的共享React Project

Search.js（我们的共享组件）

所以现在我在共享组件中，我想调用renderTabs使其渲染。我无法正常工作。当我运行站点时，我只看到文字文本输出为文本“标签”，而不是React组件，因此我没有称其为“正确”。

render() {
    const {
      renderSearchResults,
      renderTabs,
      //....rest of the props are here
    } = this.props;

    const { response: searchResults } = this.state;
    const tabs = renderTabs();
    // const tabs = React.cloneElement(renderTabs, { searchResults });

    const icon = hideIcon ? null : (
      <div className={theme.searchIcon}>
        <Icon icon="search" />
      </div>
    );
    const searchResultsTags = renderSearchResults({
      userInput,
      searchResults,
      loading,
    });
    return (<div>{tabs}</div>);
  }

我也试过了，但是没有渲染出来。我本来希望有反应来调用renderTabs但... ???：

render() {
    const {
      renderSearchResults,
      renderTabs,
      //....rest of the props are here
    } = this.props;

    const { response: searchResults } = this.state;
    //const tabs = renderTabs({ searchResults });
    // const tabs = React.cloneElement(renderTabs, { searchResults });

    const icon = hideIcon ? null : (
      <div className={theme.searchIcon}>
        <Icon icon="search" />
      </div>
    );
    const searchResultsTags = renderSearchResults({
      userInput,
      searchResults,
      loading,
    });
    return ({tabs});
  }

更新资料

它肯定是Search.js中的一个功能



更新2

但是尝试一下，这也不起作用：

    const tabs = () => renderTabs();

 <div> { tabs() } </div>
// also tried  <div> { tabs } </div>

这是它在bundle.js中呈现的内容，仍然将制表符视为文本：

最佳答案

似乎可能与您的this上下文有关。确保将renderTabs绑定到Container的constructor中的Container组件，如下所示：

constructor() {
   super();
   this.renderTabs = this.renderTabs.bind(this);
}

如果这样做，您可能会遇到无限循环问题。由于renderTabs()正在呈现SearchTabs，因此它正在render()上调用SearchTabs方法。我猜想prop上的某些state或SearchTabs的一部分会被更改，从而导致无限次重新渲染。尝试将回调包装在箭头函数中，如下所示：

const tabs = () => { this.renderTabs({ searchResults }) };

然后调用tabs函数以获取您的JSX。那将是我最好的选择。看起来您正在向renderTabs传递参数，但是您没有定义该参数，或者renderTabs应该使用该参数做什么。祝你好运！

关于javascript - 通过调用函数将 Prop 传递给React类的正确方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45848727/