React中props.children通过children属性/展开props的生效原理及文档依据

一、原本的理解 #

我原本认为React中props.children的用法是：组件标签内的子节点会替换组件render方法里this.props.children的位置，示例代码如下：

JS代码 #

class ThemedButton extends React.Component {
  render() {
    console.log(this.props);
    return (
      <button>
        {this.props.children} " 12345"
      </button>
    );
  }
}

function Toolbar(props) {
  return (
    <ThemedButton onClick={props.changeTheme}>
      Change Theme
    </ThemedButton>
  );
}

ReactDOM.render(<Toolbar />, document.getElementById('root'));
// 最终渲染结果：<button>Change Theme " 12345"</button>

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

二、发现的特殊行为 #

但我发现两种特殊情况，子节点依然会被自动插入：

1. 省略props.children，给<button>标签传递{...this.props}
2. 直接给<button>设置children="XYZ"属性

示例代码如下：

JS代码 #

class ThemedButton extends React.Component {
  render() {
    console.log(this.props);
    return (
      <button {...this.props}></button> // 子节点被自动添加
    );
  }
}

class ThemedButton2 extends React.Component {
  render() {
    console.log(this.props);
    return (
      <button children="XYZ"></button>
    );
  }
}

function Toolbar(props) {
  return (
    <React.Fragment>
      <ThemedButton onClick={props.changeTheme}>
        Change Theme
      </ThemedButton>
      <ThemedButton2> Change theme2 </ThemedButton2>
    </React.Fragment>
  );
}

ReactDOM.render(<Toolbar />, document.getElementById('root'));

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

运行后可见：

• 使用{...props}时，ThemedButton的子节点会自动成为<button>的子节点
• ThemedButton2中手动设置的children="XYZ"会作为<button>的子节点，组件标签内的Change theme2被覆盖

三、疑问 #

请问这两种情况的原因是什么？React官方文档中哪里有相关说明？

内容的提问来源于stack exchange，提问作者user31782