相思如故 發表於 2019-6-3 18:36:00

React父组件调用子组件的方法

<div class="main-body">
<h3>16.3.0之前的设置方法为</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> HelloMessage =<span style="color: rgba(0, 0, 0, 1)"> React.createClass({
    childMethod: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
      alert(</span>"组件之间通信成功"<span style="color: rgba(0, 0, 0, 1)">);
    },
    render: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
      </span><span style="color: rgba(0, 0, 255, 1)">return</span> &lt;div&gt; &lt;h1&gt;Hello {<span style="color: rgba(0, 0, 255, 1)">this</span>.props.name}&lt;/h1&gt;&lt;button onClick={this.childMethod}&gt;子组件&lt;/button&gt;&lt;/div&gt;
<span style="color: rgba(0, 0, 0, 1)">    }
});

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 父组件</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> ImDaddyComponent =<span style="color: rgba(0, 0, 0, 1)"> React.createClass({
    getDS: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 调用组件进行通信</span>
      <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.refs.getSwordButton.childMethod();
    },
    render: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
      </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
                </span>&lt;div&gt;
                  &lt;HelloMessage name="John" ref="getSwordButton" /&gt;
                  &lt;button onClick={<span style="color: rgba(0, 0, 255, 1)">this</span>.getDS}&gt;父组件&lt;/button&gt;
                &lt;/div&gt;
<span style="color: rgba(0, 0, 0, 1)">      );
    }
});

ReactDOM.render(
      </span>&lt;ImDaddyComponent/&gt;,
      document.getElementById('correspond'<span style="color: rgba(0, 0, 0, 1)">)
);</span></pre>
</div>
<h3>16.3.0之后(包括16.3.0 version)的设置方法为</h3>
<div class="cnblogs_code">
<pre>import React, {Component} from 'react'<span style="color: rgba(0, 0, 0, 1)">;

export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> class Parent extends Component {
    render() {
      </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">(
            </span>&lt;div&gt;
                &lt;Child onRef={<span style="color: rgba(0, 0, 255, 1)">this</span>.onRef} /&gt;
                &lt;button onClick={<span style="color: rgba(0, 0, 255, 1)">this</span>.click} &gt;click&lt;/button&gt;
            &lt;/div&gt;
<span style="color: rgba(0, 0, 0, 1)">      )
    }

    onRef </span>= (ref) =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      </span><span style="color: rgba(0, 0, 255, 1)">this</span>.child =<span style="color: rgba(0, 0, 0, 1)"> ref
    }

    click </span>= (e) =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.child.myName()
    }

}

class Child extends Component {
    componentDidMount(){
      </span><span style="color: rgba(0, 0, 255, 1)">this</span>.props.onRef(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">)
    }

    myName </span>= () =&gt; alert('xiaohesong'<span style="color: rgba(0, 0, 0, 1)">)

    render() {
      </span><span style="color: rgba(0, 0, 255, 1)">return</span> ('woqu'<span style="color: rgba(0, 0, 0, 1)">)
    }
}</span></pre>
</div>
</div><br><br>
来源：https://www.cnblogs.com/universe-cosmo/p/10969351.html
頁: [1]
查看完整版本: React父组件调用子组件的方法