反應 - 向兒童發送功能道具

我看到一些關於類似問題的問題，但不知何故，我仍然無法解決我的問題，所以我在此尋求您的幫助。我非常新的反應，想從家長髮送功能，以一個孩子，然後將它從兒童，但不知何故，當我想用它，它說反應 - 向兒童發送功能道具

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'));

來源

2016-09-29 Ivo

對不起，我編輯我的帖子，我只是想console.log（'幫助'）來激活哪個doesnt。下面的很好的答案集中在我沒有發送函數參數的事實，但我只是想激活該功能，它似乎並沒有工作（仍然是未定義的錯誤） – Ivo

好吧部分作品得益於下面的評論，我的問題似乎在別處。我也想在我的shild組件來創建這樣一個變量：\t鏈接：[ \t \t {關鍵：1，名稱：「幫助」，單擊：this.props.changePageHelp} \t]，它似乎沒有喜歡這是因爲當我的錯誤出現時。我不能使用我的Child組件中的變量發送的道具嗎？ – Ivo

下面的答案解決了您的一些代碼問題，但它們並沒有真正解決您的錯誤，這似乎與'this'沒有'prop'屬性有關 - 可能是因爲錯誤的this是被引用。嘗試使用ES6箭頭功能。這將防止這種頭痛。 – Chris

出於性能考慮，應避免在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'));

來源

2016-09-29 08:05:08

這樣做，非常感謝！不過，我仍然不明白爲什麼其他解決方案無法正常工作...... – Ivo

從Menu函數傳遞一個值並將其接收到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>

來源

2016-09-29 08:01:20

反應 - 向兒童發送功能道具

回答

相關問題