react中父子间的简单通信

react中父子间的的通信

  • 由于不是在项目中写的,所以需要引入一些核心库
    react.development.js
    react-dom.development.js
    babel.min.js>
  • 父组件中改变子组件的状态。
    • 方法一:在父组件中通过this.ref.xxx拿到子组件对象,直接在父组件中改变子组件的状态,对子组件来说并不是很好
      <body>
          <div id="app"></div>
          <script type="text/babel">
              class Parent extends React.Component {
                  add(){
                     let c=this.refs.xxx;
                     console.log(this.refs.xxx)
                     c.state.num+=1;
                     this.forceUpdate()
                  }
                  render() {
                      return (
                          <div>
                              <h1>父组件</h1>
                              <button onClick={this.add.bind(this)}>+1</button>
                              <hr /> 
                              <Child ref="xxx" ></Child>
                          </div>
                      )
                  }
              }
              class Child extends React.Component {
                  state = {
                      num: 0
                  }
                  render() {
                      return (
                          <div>
                              <p>{this.state.num}</p>
                              <h3>子组件</h3>
                          </div>
                      )
                  }
              }
              ReactDOM.render(<Parent />, document.getElementById("app"));
          </script>
      </body>
      
    • 方法二:在子组件中定义一个改变状态的方法,然后在父组件中进行调用
       <div id="app"></div>
          <script type="text/babel">
          // 组件类,本质上还是一个类,一个类只有被创建的时候才能发挥作用
              // 一个类需要new ,不new相当于没用
              class Parent extends React.Component {
                  add=()=>{
                     let c= this.refs.xxx;
                  //    调用子组件中的方法
                     c.add()
                  }
                  render() {
                      return (
                          <div>
                              <h1>父组件</h1>
                              <button onClick={this.add}>+1</button>
                              <hr /> 
                              {/* 给组件起个别名,最好用ref,这个使用的时候,就相当于new */}
                              <Child ref="xxx" ></Child>
                          </div>
                      )
                  }
              }
              // class类 ----function
              class Child extends React.Component {
                  state = {
                      num: 0
                  }
                  add=()=>{
                      this.setState({
                          num:this.state.num+1
                      })
                  }
                  render() {
                      return (
                          <div>
                              <p>{this.state.num}</p>
                              <h3>子组件</h3>
                          </div>
                      )
                  }
              }
              ReactDOM.render(<Parent />, document.getElementById("app"));
          </script>
              ```
      
  • 在子组件中改变父组件的状态
    • 方法一:在子组件中直接修改父组件的状态,通过给子组件传递自己的组件对象xxx={this},然后子组件使用this.props.xxx进行接收,可以在自己定义的方法中修改父组件的状态。
      class Parent extends React.Component {
          state={
              num:0
          }
          render() {
              return (
                  <div>
                      <h1>父组件</h1>
                      <p>{this.state.num}</p>
                      <hr /> 
                      <Child xxx={this} ></Child> 
                  </div>
              )
          }
      }
      class Child extends React.Component {
          add=()=>{
              let p=this.props.xxx;
              console.log(p)
              p.state.num+=1
              p.forceUpdate()
          }
          render() {
              return (
                  <div>
                      <p></p>
                      <button onClick={this.add}>+1</button>
                      <h3>子组件</h3>
                  </div>
              )
          }
      }
      
    • 方法二:在父组件中定义一个修改状态的方法,然后把这个方法传递给子组件,子组件对该方法进行接收和调用
      class Parent extends React.Component {
         state={
             num:0
         }
         add=()=>{
             this.setState({
                 num:this.state.num+1
             })
         }
         render() {
             return (
                 <div>
                     <h1>父组件</h1>
                     <p>{this.state.num}</p>
                     <hr /> 
                     <Child add={this.add} ></Child> 
                 </div>
             )
         }
      }
      class Child extends React.Component {
         add=()=>{
             this.props.add()
         }
         render() {
             return (
                 <div>
                     <p></p>
                     <button onClick={this.add}>+1</button>
                     <h3>子组件</h3>
                 </div>
             )
         }
      }
      
展开阅读全文

Windows版YOLOv4目标检测实战:训练自己的数据集

04-26
©️2020 CSDN 皮肤主题: 游动-白 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值