传递孩子反应成分

时间:2018-03-30 08:16:24

标签: javascript reactjs

我如何将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>

1 个答案:

答案 0 :(得分:0)

解决这个问题只需添加`{... 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} />
      )
    }