React - 子どもに関数の小道具を送信

Question

同様の問題についていくつかの質問がありましたが、どういうわけか私はあなたの親切な助けを求めています。私は反応するようにかなり新しいですし、最初の答えが助けた後

Uncaught TypeError: Cannot read property 'props' of undefined"

編集コードを親から子へと機能を送信して、子供からそれを使用しますが、どういうわけか、私はそれを使用したい場合、それは言うしたいです：

var Menu = React.createClass({ 
    links : [ 
     {key : 1, name : "help", click : this.props.changePageHelp} 
    ], 
    render : function() { 
     var menuItem = this.links.map(function(link){ 
      return (
       <li key={link.key} className="menu-help menu-link" onClick={link.click}>{link.name}</li> 
      ) 
     }); 
     return (
      <ul> 
        {menuItem} 
      </ul> 
     ) 
    } 
}); 

var Admin = React.createClass ({ 
    _changePageHelp : function() { 
     console.log('help'); 
    }, 
    render : function() { 
     return (
      <div> 
       <div id="menu-admin"><Menu changePageHelp={this._changePageHelp.bind(this)} /></div> 
      </div> 
     ) 
    } 
}); 

ReactDOM.render(<Admin />, document.getElementById('admin')); 

Answer 1

、あなたはJSXの小道具にbindまたは矢印の機能を使用しないでください。これは、イベント処理関数のコピーがmap()関数によって生成されたすべてのインスタンスに対して作成されるためです。これはここで説明します：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

これを避けるには、繰り返しセクションを独自のコンポーネントにプルすることができます。 http://codepen.io/PiotrBerebecki/pen/EgvjmZ親コンポーネントのconsole.log()呼び出しがリンクの名前を受け取るようになりました。これは例えばReact Routerで使うことができます。

var Admin = React.createClass ({ 
    _changePageHelp : function(name) { 
     console.log(name); 
    }, 

    render : function() { 
     return (
     <div> 
      <div id="menu-admin"> 
      <Menu changePageHelp={this._changePageHelp} /> 
      </div> 
     </div> 
    ); 
    } 
}); 


var Menu = React.createClass({ 
    getDefaultProps: function() { 
    return { 
     links: [ 
     {key: 1, name: 'help'}, 
     {key: 2, name: 'about'}, 
     {key: 3, name: 'contact'} 
     ] 
    }; 
    }, 

    render: function() { 
    var menuItem = this.props.links.map((link) => { 
     return (
     <MenuItem key={link.key} 
        name={link.name} 
        changePageHelp={this.props.changePageHelp} 
        className="menu-help menu-link" /> 
    ); 
    }); 

    return (
     <ul> 
     {menuItem} 
     </ul> 
    ); 
    } 
}); 


var MenuItem = React.createClass ({ 
    handleClick: function() { 
    this.props.changePageHelp(this.props.name); 
    }, 

    render : function() { 
    return (
     <li onClick={this.handleClick}> 
     Click me to console log in Admin component <b>{this.props.name}</b> 
     </li> 
    ); 
    } 
}); 


ReactDOM.render(<Admin />, document.getElementById('admin')); 

Answer 2

メニュー機能から値を渡し、changePageHelp関数で値を渡しても機能します。パフォーマンス上の理由から

var Menu = React.createClass({ 
 
    render : function() { 
 
     return (
 
      <div> 
 
       {this.props.changePageHelp('Hello')} 
 
      </div> 
 
     ) 
 
    } 
 
}); 
 

 
var Admin = React.createClass ({ 
 
    _changePageHelp : function(help) { 
 
     return help; 
 
    }, 
 
    render : function() { 
 
     return (
 
      <div> 
 
       <div id="menu-admin"><Menu changePageHelp={this._changePageHelp.bind(this)} /></div> 
 
      </div> 
 
     ) 
 
    } 
 
}); 
 

 
ReactDOM.render(<Admin />, document.getElementById('admin'));

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