Reactjs 如何将方法传递给子组件？

伙计们！ 我开始用webpack、react、redux等构建一个应用程序，我不确定我是否应该面对这种情况：

我想开发一个单页应用程序，有一个包含所有内容的react节点“”。第一件事，将出现在我的网页上，是一个引导导航栏。我想要的是创建一个react组件来呈现导航栏，并向他传递1）字符串列表，以及2）单击其中一个项时应调用的函数。我希望这样做，因为我希望在顶层跟踪我所在的“页面”（它将始终是导航栏项之一）

这里是myApp组件：

export default class myApp extends React.Component {
    constructor(props) {
        super(props);
        this.handleNavbarClick = ::this.handleNavbarClick;
        this.state = {
            currentPage: 'Home',
            navbarItems : ['Home', 'contact', 'etc']
        };
    }
    handleNavbarClick(e) {
        //debug alert:
        alert(e);
        this.state.currentPage = e;
    }
    render() {
        return (
            <div>
                <NavBar items={this.state.navbarItems} itemClickHandler={this.handleNavbarClick}/>
                <Wellcome />
                <LandingMenu />
                CurrentPage: {this.state.currentPage}
            </div>
        );
    }
}

export default class NavBar extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        var handler = this.props.itemClickHandler;
        var itemsHtml = this.props.items.map(function(i) {
            return <li className="nav-item"> <a className="nav-link" onClick={handler(i)}>{i}</a></li>
        });
        return (
             <nav className="navbar navbar-static-top navbar-dark bg-inverse">
              <a className="navbar-brand" href="#"><img src={LogoSrhSmall} /></a>  
              <ul className="nav navbar-nav">
                {itemsHtml} 
              </ul>
            </nav>

        )
    }
}

我想将完整的选定对象传递给父对象myApp

目前看来：

在myApp上：

...
handleNavbarClick(e) {
        this.setState({currentPage : e.target.id}) ;
    }
...

在导航栏上：

...
    renderNavItem(item) {
        return (<li className="nav-item">
            <a id={item} className="nav-link" onClick={this.props.itemClickHandler}>{item}</a>
        </li>)
    }
    render() {
        return (
             <nav className="navbar navbar-static-top navbar-dark bg-inverse">
              <a className="navbar-brand" href="#"><img src={LogoSrhSmall} /></a>  
              <ul className="nav navbar-nav">
                {this.props.items.map(this.renderNavItem, this)} 
              </ul>
            </nav>
        )
    }
...

我使用：

 onClick={this.props.itemClickHandler(item)}

每次渲染迭代时都会调用itemClickHandler，react在迭代项目以显示它们时会“调用”该方法（无需任何用户交互）。。。。知道为什么吗

提前感谢,，

---

约翰你有两个问题。第一个是handleNavbarClick（e）is事件中的e。您要做的是为您的每个项目列表设置一个标识符。然后你会得到e.target.id。当然，您还需要在映射列表中添加id。第二个问题是您需要像这样将“this”传递到映射列表

render（）{
var itemsHtml=this.props.items.map（函数（i）{
return
{i}
}，这）；

您有两个问题。第一个问题是handleNavbarClick（e）is事件中的e。您要做的是为每个项目列表提供一个标识符。然后您将获得e.target.id。当然，您还需要在映射列表中添加id。第二个问题是您需要像这样将“this”传递到映射列表中

render（）{
var itemsHtml=this.props.items.map（函数（i）{
return
{i}
}，这个）；

我将建议对代码进行一些更改，使其更易于阅读：

对于

itemClickHandler

您使用的不是

（e）

，因为

e

通常表示事件。为此，您应该执行

itemClickHandler（page）

然后在导航栏组件中，您可能需要执行以下操作：

export default class NavBar extends React.Component {
    constructor(props) {
        super(props);
    }
    renderNavItem(item) {
        <li className="nav-item">
            <a className="nav-link" onClick={this.props.handleNavbarClick(item)}>{item}</a>
        </li>
    }
    render() {
        return (
             <nav className="navbar navbar-static-top navbar-dark bg-inverse">
              <a className="navbar-brand" href="#"><img src={LogoSrhSmall} /></a>  
              <ul className="nav navbar-nav">
                {this.props.items.map(this.renderNavItem)} 
              </ul>
            </nav>

        )
    }
}

---

这将告诉React您已更改状态并希望重新渲染。

我将建议对代码进行一些更改，以使其更易于阅读：

对于

itemClickHandler

您使用的不是

（e）

，因为

e

通常表示事件。为此，您应该执行

itemClickHandler（page）

然后在导航栏组件中，您可能需要执行以下操作：

export default class NavBar extends React.Component {
    constructor(props) {
        super(props);
    }
    renderNavItem(item) {
        <li className="nav-item">
            <a className="nav-link" onClick={this.props.handleNavbarClick(item)}>{item}</a>
        </li>
    }
    render() {
        return (
             <nav className="navbar navbar-static-top navbar-dark bg-inverse">
              <a className="navbar-brand" href="#"><img src={LogoSrhSmall} /></a>  
              <ul className="nav navbar-nav">
                {this.props.items.map(this.renderNavItem)} 
              </ul>
            </nav>

        )
    }
}

---

这将告诉React您已更改了状态并希望重新渲染。

我遇到了一个问题，处理程序在没有实际单击按钮的情况下自行运行。我用一个参数调用处理程序，就像您是第一个一样。我删除了该参数，行为停止。我尝试了绑定（null，props）技巧和它对道具有效，但我不知道如何在处理程序中访问事件本身，因此我可以使用e.preventDefault（）

在寻找了一分钟后，我发现了这个gem，它遍历函数收到的所有未命名参数

for (var i=0; i<arguments.length; i++) {
      console.log(arguments[i])
    };

现在一切都好了

---

谢谢你给我一个起点！

我遇到了一个问题，处理程序在没有实际单击按钮的情况下自己运行。我用一个参数调用处理程序，就像你是第一个一样。我删除了这个参数，行为停止了。我尝试了绑定（null，props）技巧和它对道具有效，但我不知道如何在处理程序中访问事件本身，因此我可以使用e.preventDefault（）

在寻找了一分钟后，我发现了这个gem，它遍历函数收到的所有未命名参数

for (var i=0; i<arguments.length; i++) {
      console.log(arguments[i])
    };

现在一切都好了

---

谢谢你给我一个起点！

你好，贾比，再次感谢。我已经编辑了我的问题（在末尾添加了第二部分）。你可以看一下吗？谢谢，John@user3425557我不确定你指的是什么。我制作了一个代码笔，它工作正常，并进行了相应的更新。我删除了一些我没有的代码（和其他组件一样），但它似乎工作正常。我需要更多的信息才能提供帮助。哈罗·贾姆比，我不知道为什么，但我让它工作的唯一方法是使用：onClick={this.props.itemClickHandler.bind（null，item）}>{item.name}。就像你在代码笔上做的那样“…onClick={this.props.itemClickHandler}…”对我来说不起作用。我会努力找出区别。再次感谢：）哈罗·贾比，再次感谢。我已经编辑了我的问题（在结尾添加了第二部分）.你能看一下吗？谢谢，John@user3425557我不确定你指的是什么。我制作了一个代码笔，工作正常，并相应地进行了更新。我删除了一些我没有的代码（像其他组件一样），但它似乎工作正常。我需要更多的信息才能继续提供帮助。你好，Jambi，我不知道为什么，但我让它工作的唯一方法是使用：onClick={this.props.itemClickHandler.bind（null，item）}>{item.name}。就像你在代码笔上做的那样“…onClick={this.props.itemClickHandler}…”对我不起作用。我会努力找出区别。再次感谢：）

for (var i=0; i<arguments.length; i++) {
      console.log(arguments[i])
    };

e = arguments[1]