react/no-children-prop 正确性

✅ 本规则默认开启。

作用

子代元素始终应该是实际子代元素，而不应该作为道具传递。

使用 JSX 时，子代元素应嵌套在开始标签和结束标签之间。

不使用 JSX 时，子代元素应作为其他参数传递给 React.createElement。

示例

此规则的错误代码示例

<div children='Children' />

<MyComponent children={<AnotherComponent />} />
<MyComponent children={['Child 1', 'Child 2']} />
React.createElement("div", { children: 'Children' })

此规则的正确代码示例

<div>Children</div>
<MyComponent>Children</MyComponent>

<MyComponent>
  <span>Child 1</span>
  <span>Child 2</span>
</MyComponent>

React.createElement("div", {}, 'Children')
React.createElement("div", 'Child 1', 'Child 2')

参考

• 规则来源