Reactの子コンポーネント間で通信する

debugcn 投稿 Dev

Ogurchik

私はすでに同様の質問をしましたが、新しい問題が発生しました）。子コンポーネントをクリックしながら親コンポーネントの機能を実行したい。

var Fructs = ['banana', 'mango', 'potato'];

var Kaka = React.createClass({
  render() {
    return <div onClick={this.props.onClick}> Hell o forld </div>
  }
});

var Application = React.createClass({
  handle() {
    console.log("took took");
  },
  render() {
    console.log(this.props);
    var mass = Fructs.map(function(data, index) {
      return <Kaka key={index} onClick={handle.bind(this)}/>
    });
    return (
      <div>
        { mass }
      </div>
    );
  }
});

var App = React.createClass({
  render() {
    return (
      <div>
        <Application />
      </div>
    );
  }
});

React.render(<App/>, document.getElementById('app'));

CodePenの例子コンポーネントが1つであれば、すべてが完璧に機能します。しかし、子コンポーネントのリストを生成しようとすると、機能しません。「これ」が見つからないというエラーのログ書き込み。私は同様の問題をドキュメントReactで見つけましたが、私はそれをwronпします（。私が間違っていることを教えてください？

OleksandrT。

これを.mapコールバック用に設定する必要があります。また、これhandleを取得するにはthis.handle、変更後に使用する必要があります。.map次のようになります。

var mass = Fructs.map(function(data, index){
  return <Kaka key={index} onClick={ this.handle.bind(this) } />
                                     ^^^^^^^^^^^ - get Component method 
}, this);
   ^^^^ - callback context

var Fructs = ['banana', 'mango', 'potato'];

var Kaka = React.createClass({
  render() { 
   return <div onClick={this.props.onClick}>
     Hell o forld     
   </div>
  }
})

var Application = React.createClass({
  handle() {
    console.log("took took");
  },
  
  render() {
    var mass = Fructs.map(function(data, index){
      return <Kaka key={index} onClick={ this.handle.bind(this) } />
    }, this);

    return <div>
      { mass }
    </div>
  }
})

var App = React.createClass({
  render() {
    return <div>
      <Application />
    </div>
  }
})

ReactDOM.render(<App  />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]