javascript - React - 向 Children 发送功能 Prop

标签 javascript reactjs undefined parent-child

我看到一些关于类似问题的问题,但不知何故我仍然无法解决我的问题,所以在这里我请求你的帮助。我是 React 的新手,想将一个函数从 Parent 发送到 child 然后从 Child 使用它但是不知何故当我想使用它时它说

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

最佳答案

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

关于javascript - React - 向 Children 发送功能 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39764542/

相关文章:

javascript - XMPP CORS 域错误

javascript - 通过调度重置其他 reducer 的状态?

javascript - 在没有 setTimeout 的情况下在 componentDidMount() 中操作 DOM

javascript - 检查是否定义了 javascript 对象/属性

javascript - 如何检查变量是否未定义与在javascript中未声明?

javascript - 通过 HTTPS 进行客户端哈希/加盐

javascript - Angular 延迟加载 - 没有看到它正在工作

javascript - 以编程方式打开 lightgallery.js

javascript - 使用react html-react-parser或innerHTML解析html字符串?哪个更快?

javascript - 我的 DIY trim 函数无法返回正确答案,它返回未定义