Question

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

我还要注意，最初的renderTabs是容器中的一个具有所有逻辑的函数，但是我将它移动到一个新的组件，以便在抽象之后更容易维护。在此之前，Container.js中的renderTabs（）看起来像这样：

Web项目 - 使用共享反应项目中的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项目使用的共享反应项目

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

所以现在我在共享组件中，我想调用renderTabs以便它呈现。我不能让这个工作。 当我运行网站时，我只会看到以文字＆＃39;标签输出的文字文字，而不是反应组件，因此我没有正确调用此信息。

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中呈现的内容，仍然将标签视为文本：

Answer 1

好像它可能与您的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的某些内容正在发生变化，从而导致无限重新渲染。尝试将回调包装在箭头函数中，如下所示：

renderTabs

然后调用renderTabs函数来获取JSX。那些将是我最好的赌注。它也看起来像是在向$array = ['English' => '12', 'Swedish' => '12']; function arraySumCb(&$subject) { return function () use (&$subject) { return array_sum($subject); }; } $sum = arraySumCb($array); echo $sum(); // 24 $array['Swedish'] = '15'; echo $sum(); // 27 $array['Swedish'] = '10'; echo $sum(); // 22传递一个参数，但你没有定义该参数或$array = ['English' => '12', 'Swedish' => '12']; class SumMarks { private $_subject; public function __construct(array &$subject = []) { $this->_subject = &$subject; } public function __toString() { return "" . array_sum($this->_subject); } } $sum = new SumMarks($array); echo $sum; // 24 $array['Swedish'] = '10'; echo $sum; // 22应该对该参数做什么。祝你好运！

Answer 2

我试过这样的事情：

共享组件：

Parent: asd
Shared: asd
Parent: asd
Shared: asd

父组件：

testFunc() {
    const a = this.props";
    console.log("Parent:", a);
    return a;
}

控制台输出就是这样：

Parent: undefined
Shared: undefined
Parent: undefined
Shared: undefined

但是，如果我将 testFunc 更改为：

testFunc = (props) => {
    const a = props;
    console.log("Parent:", a);
    return a;
  }
render() {
    return (<Shared testFunc={() => this.testFunc(this.props)} />);
}

输出就是这样：

renderTabs(props) {
    const { selectedTab, selectedFilter, isDropdownOpen } = props;
    return (<SearchTabs
      fetchSearch={this.props.fetchSearch}
      isDropdownOpen={isDropdownOpen}
      onFilterClick={this.onFilterClick}
      selectedFilter={selectedFilter}
      selectedTab={selectedTab}
      setTab={setTab}
      resetNextPage={this.props.resetNextPage}
    />);
  }

 render() {
    return (
      <Search
        renderTabs={() => this.renderTabs(this.props)}
      />
    );

我假设你想在renderTabs函数中访问 this.props 。试试这个解决方案

父组件

{{1}}

对于你的例子：

{{1}}

通过调用函数传递道具反应类的正确方法

2 个答案: