Question

任何人都可以帮助我了解一些我需要重构的代码中发生的事情。

我有一个看起来很普通的组件，例如：

export default class MyContainer extends PureComponent {
  //props
  //state
  //render()
  //etc.
}

然后将其作为道具传递给这样的另一个组件：

export class ParentContainer
render() {
    return (
      <div>
        <Tabs
          home={MyContainer}
        />
      </div>
    );
  }
}

但是让我感到困惑的是Tabs内部，它需要一个函数。

export default class Tabs extends PureComponent {
   static propTypes = {
    home: func.isRequired,
  }
}

这对我提出了许多问题：

此home={MyContainer}的作用是什么？只需实例化所有默认props的内联组件？我以前没有看过这种语法。以及为什么该组件充当功能。幕后有什么事情发生，例如react将组件隐式转换为render（）函数？

如果我尝试以“正常”方式实例化它，以便可以添加一些新的道具，即{<MyContainer />}，那么我会收到一个运行时错误消息，指出Tabs需要一个函数？我是否应该更改选项卡以期望某个对象能够正常工作？

Answer 1

home={MyContainer}的作用是什么？

组件MyContainer作为道具传递给Tabs组件。 Tabs将决定何时渲染MyContainer组件。

为什么该组件充当函数。幕后有什么事情发生，例如react将组件隐式转换为render（）函数？

反应组件是ES6类。 JavaScript中的所有类本质上都是functions。 class语法只是定义函数的语法糖。这就是home: func.isRequired意味着将组件传递给home道具的原因。

如果我尝试以“正常”方式实例化它，以便可以添加一些新的道具，即{}，我会收到一个运行时错误消息，指出Tabs需要一个函数？我是否应该更改选项卡以期望某个对象能够正常工作？

不。当您将{< MyContainer />}传递给home时，您正在尝试在home属性中设置该组件。您只应将对home的引用传递给home={MyContainer}