react学习-组合与继承

 

1. 在父组件中引入组件时使用双标签的形式。把要重用的代码或者组件插入到双标签里面

   ...
   render () {
    return (
      <FancyBorder color="blue">
       <h1 className="Dialog-title">
         Welcome
       </h1>
       <p className="Dialog-message">
         Thank you for visiting our spacecraft!
       </p>
     </FancyBorder>
    )
   }
   ...

   在FancyBorder组件里通过{this.props.children}决定插入的内容应该放在那里

   ...
   export default class FancyBorder extends React.Component {
    ...
   render () {
       return (
         <div>
          你好
          {this.props.children}
         </div>
       )
   }
   }

2. 当向组件中插入多段代码

   ...
   render () {
    return (
     <CompositDemo 
      left= {
      (<div>我是左边的代码</div>)
      }
      right={
       (<div>我是右边的代码</div>)
      }
    />
    )
   }
   ...

   在组件中插入代码

   ...
   ​
   export default class CompositDemo extends React.Component {
     ...
     render () {
       return (
         <div>
           我是重用组件的父组件
           <p>{this.props.left}</p>
           <p>{this.props.right}</p>
         </div>
       )
     }
   }

3. 向重用组件中传如数据

   可以直接调用祖父组件中的数据

   export default class App extends React.Component {
     constructor () {
       super ()
       this.state = {
         showWarning: true
       }
     }
   ​
     handleToggleClick() {
       this.setState(state => ({
         showWarning: !state.showWarning
       }));
     }
   ​
     render () {
       var data = '传入重用组件里的数据'
       return (
         <div>
           <CompositDemo>
             <div>
               我是被重用的部分
               <span>{data}</span>
             </div>
           </CompositDemo>
         </div>
       )
     }
   }