javascript - 将一个 React 组件指定为另一个组件的 defaultProp

Question

我有两个组件，Section和 Button .我要Section接受Button或 String因为它是 child Prop 。如何指定 Button作为 Section 的默认 children Prop 。

const Button = () =>
    <button type="button">Test</button>

const Section = props => {
  const { children } = props
    return (
      <div>{children}</div>
    )
}

Section.defaultProps = {
    children: /* ??? */
}

Section.propTypes = {
    children: PropTypes.node
}

我尝试了以下方法:

Section.defaultProps = {
    children: 'Section Test'     //Works fine
}

但是:

Section.defaultProps = {
    children: Button /* does not work */
}

我收到以下错误:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Answer 1

正如错误消息所暗示的，而不是使用 Button使用 <Button /> .

Section.defaultProps = {
  children: <Button />
}

参见 working example