Question

特别是，我对传递信息的方式感到好奇。在另一个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')
);

Answer 1

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

Answer 2

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

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

哪个是使用React子组件的最佳方法

2 个答案: