传递孩子反应成分

Question

我如何将React.render中写的内容传递给组件？我尝试使用Component重写此代码（https://pastebin.com/Pwtnd7Yh）如何将子代码传递给组件，例如代码作者编写...rest它是什么，以及如何将数据传递给我成分

    <script type="text/babel">
      const root = document.getElementById("root");

      class Block extends React.Component{
        constructor(props){
          super(props);
          this.state = {size: props.size, style: props.style};
        }
        render(){
          const sizeClassName = this.state.size ? `box--${this.state.size}` : '';
          return(
            <div className={`box ${sizeClassName}`} style={{paddingLeft: 20, ...this.state.style}}  />
          )
        }
      }

      ReactDOM.render(
        <div>
        <Block size='small' style={{backgroundColor: 'lightblue'}}>small box</Block>
        <Block size='medium' style={{backgroundColor: 'orange'}}>medium box</Block>
        </div>,
        root
      )
    </script>

Answer 1

解决这个问题只需添加`{... this.props}作为属性。

  render(){
      const sizeClassName = this.state.size ? `box--${this.state.size}` : '';
      return(
        <div className={`box ${sizeClassName}`} style={{paddingLeft: 20, ...this.state.style}} {...this.props} />
      )
    }