Question

我正在开发一个包含一些子组件的React组件。我希望它有一组默认的子项，如果它的元素是在没有指定子项的情况下创建的（即<MyContainerComponent ... />应该等同于<MyContainerComponent ...></MyContainerComponent>）。

从https://github.com/facebook/react/blob/v0.14.8/src/isomorphic/classic/element/ReactElement.js#L135开始，我了解如果未指定子级，props.children将为undefined。因此，我想依赖于此，并在children的{{1}}中设置defaultProps。

但是，我不确定，如果我将我的决定与React的实现结合得太多（即通过设计，作为React的用户，将MyContainerComponent视为任何其他支柱就可以接受未定义，如果你没有明确定义它）。我在children上阅读的所有其他材料都是单个元素或数组，但不是children。

我真的很感激更有经验的意见。

Answer 1

React项目在记录props.children的处理方式方面做得不好，但我会说：

如果您没有明确定义儿童就像接受任何其他道具一样对待儿童

参考文献：

Comments by Sebastian Markbåge：

this.props.children的类型是您的组件propTypes所说的内容。

和

我们建议大多数时候使用ReactNode的常规this.props.children类型。

ReactNode的定义包括undefined。

我的解释是undefined是props.children的有效值，一般应该是默认值。但请注意，使用JSX甚至空格可能会影响值：

<MyContainerComponent> </MyContainerComponent>

所有这一切都说，正如链接的GitHub问题所示，我试图更好地记录这一点，因此API合同是明确的：）

Answer 2

您可以使用React.createElement作为children道具的默认值 https://reactjs.org/docs/react-api.html#createelement

示例：

import React, { PureComponent } from 'react'
import { element } from 'prop-types'

export class Example extends PureComponent {
  static propTypes = { children: element }
  static defaultProps = { children: React.createElement('div') }

  render () {
    const { children } = this.props

    return <div className='parent'>{children}</div>
  }
}

Answer 3

使用getDefaultProps为儿童设置默认道具。如果react更改了空道具的定义=== undefined，他们也会在getDefaultProps生命周期方法（fiddle）中执行此操作：

var Parent = React.createClass({
    getDefaultProps: function() {
    return {
        children: <span>default child</span> // set children in default props
    };
  },

  render: function() {
    return <div>I am a { this.props.children }</div>; // if we have children use them, if not use default from state
  }
});

ReactDOM.render(
  <Parent />, // without children
  document.getElementById('container1')
);

ReactDOM.render(
  <Parent>non a default child</Parent>, // with children
  document.getElementById('container2')
);

在defaultProps中设置子项

3 个答案: