Question

有人可以告诉我https://final-form.org/docs/react-final-form/examples/wizard文件Wizard.js中第9行的情况吗？展开工作是如何进行的？

我认为，我确实了解React中子级的概念，但不是这样。如果我用<Wizard.Page>更改了index.js内的<div>并删除了Wizard.js中的第9行，该代码仍然有效，但是如果我只删除了{{ 1}}。

Answer 1

此行定义了一个非常基本的functional component，它只是呈现其子级。

它在Wizard类上定义为静态属性，因此可以通过Wizard.Page进行访问。

Wizard.js中的代码实际上并不依赖于Wizard组件的子组件是实际的Wizard.Page组件的事实，它只是假设子组件是组件中不同的步骤。向导：

render() {
    const { children } = this.props
    const { page, values } = this.state
    const activePage = React.Children.toArray(children)[page]
    ...
}

这就是为什么当您使用<div>而不是<Wizard.Page>时它仍然起作用的原因：div元素也充当子元素的包装器，并且render()方法中的代码仍会按预期工作。

但是<Wizard.Page>方法有几个好处：

它使index.js中的代码更具可读性和明确性
如果需要，Wizard.Page组件可以演变为具有更多逻辑的更复杂的组件，而无需对index.js进行任何更改

React组件内部静态

1 个答案: