Question

我注意到Redux容器的子节点可以自动作为props传递给包装组件：

<Container>
  Child Text
</Container>

Container.js：

const Container = connect()(Component)

Component.js：

const Component = ({ children }) => {
  if (children) {
    return (
      <p>
        {children}
      </p>
    )
  }

  return (
      <p>
        No Child Text
      </p>
  )
}

Component.propTypes = {
  children: PropTypes.node.isRequired,
}

如果我现在渲染：

<Container>
    Child Text
</Container>
<Container/>

我收到<Container/>的警告：

Warning: Failed propType: Required prop 'children' was not specified in 'Component'

我想知道如何避免这个警告，同时能够呈现我的组件的两种变体。

Answer 1

只需删除.isRequired

即可

来自

Component.propTypes = {
   children: PropTypes.node.isRequired,
}

你基本上告诉容器children道具是必需的，所以React会警告你它是否缺失。

使用和不使用子项渲染redux组件

1 个答案: