Question

“使用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 =（儿童）或renderTabMenu =（{儿童））

3）如何用一些内容填充此页面？我看不到有任何身体上的孩子=）

4）弄不明白博主为何将代码错误或难以实现，这对新手来说非常沮丧

5）欢迎任何在本示例中无法正常使用的一般指导

Answer 1

使用React.Children或this.props.children可以使您对React及其工作方式有一定的了解。在使组件正常工作时将花费一些尝试，但是您会在某个时候得到那个惊喜。简而言之。

this.props.children 是顶层的<Components />或html标签的数组。

例如：

<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开头。在React类this中指的是类本身，在这种情况下为TabContainer。因此，请使用this.setActiveChild()。将在类中调用该函数。如果您未指定this，它将尝试在类之外查找函数。

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

如何用一些内容填充此页面？我看不到有任何身体上的孩子=）
这就是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代码示例不起作用

1 个答案: