使用和不使用 children 渲染 redux 组件

Question

我注意到 children 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 prop 是必需的，所以如果缺少它，React 会警告你。

使用和不使用 children 渲染 redux 组件

Rendering a redux component with and without children

reactjs

redux

react-redux