← Back to rules

react/no-children-prop 正确性

它的作用

检查是否未通过属性传递子元素。

为什么这是不好的？

子元素应始终是实际的子元素，而不是作为属性传递。 使用 JSX 时，子元素应在开始标签和结束标签之间嵌套。 不使用 JSX 时，子元素应作为 React.createElement 的额外参数传递。

示例

此规则的错误代码示例：

<div children='子元素' />

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

此规则的正确代码示例：

<div>子元素</div>
<MyComponent>子元素</MyComponent>

<MyComponent>
  <span>子元素 1</span>
  <span>子元素 2</span>
</MyComponent>

React.createElement("div", {}, '子元素')
React.createElement("div", '子元素 1', '子元素 2')

如何使用

要通过配置文件或 CLI 启用此规则，可以使用：

配置文件 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-children-prop": "error"
  }
}

CLI

oxlint --deny react/no-children-prop --react-plugin

参考资料

• 规则源码