使用 React Children 代码示例无效

Question

"Using the React Children API"代码示例不工作，尝试了几个语法选项，似乎问题不太清楚。

http://developingthoughts.co.uk/using-the-react-children-api/

class TabContainer extends React.Component {
    constructor(props) {
        super();
        this.state = {
            currentTabName: props.defaultTab
        }
    }

    setActiveChild = (currentTabName) => {
        this.setState({ currentTabName });
    }

    renderTabMenu = (children) => {
        return React.Children.map(children, child => (
            <TabMenuItem 
                title={child.props.title}
                onClick={() => this.setActiveChild(child.props.name)}
            />
        );
    }

    render() {
        const { children } = this.props;
        const { currentTabName } = this.state;

        const currentTab = React.Children.toArray(children).filter(child => child.props.name === currentTabName);

        return (
            <div>
                {this.renderTabMenu(children)}
                <div>
                    {currentTab}
                </div>
            </div>
        );
    }
}

当我像这样更改代码时，它终于编译了

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

const TabMenuItem = ({ title, onClick }) => (
    <div onClick={onClick}>
        {title}
    </div>
);

class TabContainer extends React.Component {
  constructor(props) {
    super();
    this.state = {
      currentTabName: props.defaultTab
    }
  }

  setActiveChild = ( currentTabName ) => {
    this.setState({ currentTabName });
  }

  renderTabMenu = ( children ) => {
    return React.Children.map(children, child => (
      <TabMenuItem 
      title={child.props.title}
      onClick={() => this.setActiveChild(child.props.name)}
      />
      ))
  }

  render() {
    const { children } = this.props;
    const { currentTabName } = this.state;

    const currentTab = React.Children.toArray(children).filter(child =>
      child.props.name === currentTabName);

    return (
      <div>
        {this.renderTabMenu(children)}
        <div>
          {currentTab}
        </div>
      </div>
      );
  }
}

ReactDOM.render(<TabContainer />, document.getElementById("root"));

不太熟悉 JS 和 React，所以我的问题：

1) this.setActiveChild 应该用作 this.props.setActiveChild 吗？

2) renderTabMenu = ( children ) 或 renderTabMenu = ({ children })

3) 如何用一些内容填充这个页面？我没有看到任何物理 children 实际存在 =)

4）不明白博主为什么把代码放错了或者实现起来很困难，新手很郁闷

5) 欢迎任何一般性指导，在这个例子中可能不起作用的地方

Answer 1

使用 React.Children 或 this.props.children 可以提高您对 React 及其工作原理的理解水平。使一个组件工作需要几次尝试，但你会在某个时候得到那个顿悟的时刻。一言以蔽之。

this.props.children is an array of <Components /> or html tags at the top level.

例如：

<MyComponent>
  <h1>The title</h1>         // 1st child
  <header>                   // 2nd child
    <p>paragraph</p>
  </header>
   <p>next parapgraph</p>    // 3rd child
</MyComponent>

1) this.setActiveChild 应该用作 this.props.setActiveChild 吗？
在 TabContainer 中指定的任何函数都需要在 this 中执行。在一个反应中，class this 指的是 class 本身，在本例中，TabContainer。所以使用 this.setActiveChild()。将调用 class 内的函数。如果您不指定 this 它将尝试在 class.

之外寻找函数

renderTabMenu = ( children ) 或 renderTabMenu = ({ children })
renderTabMenu 是一个接受一个参数 children 的函数，因此可以像普通函数一样调用它 renderTabMenu(childeren)

如何用一些内容填充这个页面？我没有看到任何物理 children 实际存在 =)
这就是 TabsContainer 发挥作用的地方。在引擎盖下，条件渲染之类的事情会发生，但在它之外的另一个组件中，您可以指定内容。使用以下结构呈现主页、博客和联系我们选项卡。

<TabsContainer defaultTab="home">
  <Tab name="home" title="Home">
    Home Content
  </Tab>
  <Tab name="blog" title="Blog">
    Blog Content
  </Tab>
  <Tab name="contact" title="Contact Us">
    Contact content
  </Tab>
</TabsContainer>

我知道让一些示例起作用是多么困难，尤其是当您刚开始并且仍在探索反应必须提供的不同概念时。幸运的是有堆栈溢出 :).

这里有真实的示例供您试用，请访问 this CodeSandBox。

使用 React Children 代码示例无效

Using the React Children code example is not working

children

reactjs