Question

我看到一些关于类似问题的问题，但不知怎的，我仍然无法解决我的问题所以在这里我要求你的帮助。我对React很新，想把一个函数从Parent发送给一个孩子，然后从Child使用它，但不知何故，当我想用它时，它说

未捕获的TypeError：无法读取未定义的属性'props'

在第一个答案得到帮助后编辑的代码：

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

从菜单功能传递一个值并在changePageHelp函数中接收它并且它可以工作。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

出于性能原因，您应该避免在JSX props中使用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'));

React - 向Children发送函数道具

2 个答案: