哪个是使用 React 子组件的最佳方式答案

【问题标题】：Which is the best way to use React child components哪个是使用 React 子组件的最佳方式
【发布时间】：2018-08-07 05:12:23
【问题描述】：

特别是，我对传递信息的方式很好奇。在另一个thread 中，我向我解释了子组件和传递某些道具的方法，以及<MyComponent children={...} /> 的危险，我很好奇哪个会更好：将选项卡作为映射存储和使用如示例中的对象数组，或遵循 <TabList> <Tab /><Tab /> </TabList> 风格。 <MyComponent children={...} /> 和 <TabList tabs={this.state.tabs} /> 一样吗？我想是的，但显然儿童作为道具是特例？

const tabs = [
                {
          id: 0,
          label: "Archery",
          content: "Lorem Ipsum 1"
        },
                {
          id: 1,
          label: "Baseball",
          content: "Lorem Ipsum 2"
        }
      ];

function TabContent(props) {
  return (
    <div className="tabContent">
    {props.content}
    </div>
  );
}

class Tab extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick(el) {
    this.props.handleClick(el.target)
  }

  render() {
    let active = (this.props.id === this.props.activeTab) ? "active" : ""
    return (
      <li id={this.props.id} onClick={this.onClick} className={active}>
        {this.props.label}
      </li>
    );
  }
}

class TabList extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidUpdate() {
    $(this.refs.tabList).animate({scrollLeft: this.props.scrollPosition}, 400)
  }

  render() {
    let tabList = this.props.tabs.map((tab) => {
        return (
        <Tab 
          key={tab.id}
          id={tab.id}
          activeTab={this.props.activeTab}
          label={tab.label}
          handleClick={this.props.handleClick}
        />
      );
    });
    return (
        <ul className="tabList" ref="tabList">
        {tabList}
      </ul>
    );
  }
}

class TabScroller extends React.Component {

  render() {
    return (
      <div className="tabScroller">
        <div className="NavList">
          <TabNav handleClick={this.handleNavClick} />
          <TabList 
            tabs={this.state.tabs} 
            activeTab={this.state.activeTab}
            scrollPosition={this.state.scrollPosition} 
            handleClick={this.handleTabClick}
          />
        </div>
        <TabContent content={this.state.tabs[this.state.activeTab].content} />
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <TabScroller />,
  document.getElementById('root')
);

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

<TabList> <Tab /><Tab /> </TabList> 的用法只是 JSX 带来的语法糖。在内部，它与<TabList children={[<Tab />, <Tab />]} />相同。

【讨论】：

【解决方案2】：

事实证明，<TabList></TabList> 中的任何内容都将作为 props.children 传递给 TabList 组件，其中包括可能添加到子组件的所有函数和道具。这就是为什么最好将子组件作为子组件而不是道具传递，并避免不必要地复制道具。

我没有单一的资源来正式确认这一点，只是通过在 React.js 中玩耍获得的经验，所以如果有人可以评论或 DM 给我一个链接，我会将其添加到答案中。

【讨论】：