码迷,mamicode.com
首页 > 其他好文 > 详细

react学习-组合与继承

时间:2021-06-20 18:11:05      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:and   plain   craft   ring   component   str   click   space   turn   

 

  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>
      )
    }
    }

react学习-组合与继承

标签:and   plain   craft   ring   component   str   click   space   turn   

原文地址:https://www.cnblogs.com/lovlyGir/p/14906367.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!