Reactjs 对子组件响应传递函数

我想把一个函数传递给一个子组件，但是我得到了这个错误

标签上的prop passedFunction值无效。

class Parent extends Component {
    passedFunction(){}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}

class Child extends Component {
    render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

类父级扩展组件{
passedFunction（）{}
render（）{
}
}
类子扩展组件{
render（）{
}
}

基本上就是我想做的

var ReactGridLayout=require（'react-grid-layout'）

var MyFirstGrid=React.createClass({
passedFunction:function（）{}
渲染：函数（）{
返回(
A.
B
C
)
}
});

---

它似乎是在React v16中引入的。因此，将函数从父组件传递到子组件的正确方法是什么？

您缺少子组件上的绑定

this.props.passedFunction.bind(this)

---

不必在父类的构造函数中绑定函数，您可以使用arrow函数定义方法，以便使用arrow函数对其进行词汇绑定

class Child extends Component {
    render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

class Parent extends Component {
    passedFunction = () => {}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}

类子级扩展组件{
render（）{
}
}
类父级扩展组件{
passedFunction=（）=>{}
render（）{
}
}

要考虑Javascript的旧版本支持，请执行以下操作：

class Child extends Component {
    render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

class Parent extends Component {
    constructor() {
        this.passedFunction = this.passedFunction.bind(this)
    }

    passedFunction() {}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}

类子级扩展组件{
render（）{
}
}
类父级扩展组件{
构造函数（）{
this.passedFunction=this.passedFunction.bind（this）
}
passedFunction（）{}
render（）{
}
}

我发现了问题所在。这是因为反应网格布局。 我必须把剩下的财产传给孩子

class Child extends Component {
    render() {
        var { passedFunction, ...otherProps } = this.props;
        return (
            <div onClick={passedFunction} {...otherProps}></div>
        );           
    }
}

类子级扩展组件{
render（）{
var{passedFunction，…otherProps}=this.props；
返回(
);           
}
}

如果您可以像这样绑定此函数，它将起作用

class Parent extends Component {
   passedFunction = () => {};
   render() {
       <Child passedFunction={this.passedFunction} />;
   }
}

class Child extends Component {
   render() {
       <div onClick={this.props.passedFunction} />;
   }
}

类父级扩展组件{
passedFunction=（）=>{}；
render（）{
;
}
}
类子扩展组件{
render（）{
;
}
}

您是否启用了eslint和/或正在使用proptypes？您的示例可能会起作用。您看到的错误可能是因为您在某个地方遇到了

。我想我可能已经找到了问题。我的孩子正在包装另一个库中的另一个自定义组件。所以我假设你不能将道具传递给那个定制组件？如果不知道库，组件，我们无法回答这个问题，可能还有一些代码。我正在使用react grid layout，我的孩子是griditems的包装器。添加了一个关于如何将组件传递给孩子组件的官方文档：如果你能进一步解释在左侧正确的赋值方面会发生什么，那就太好了。嗨，我试过这样做，但webpack给了我一个答案错误，有什么插件我需要它吗？这应该不需要任何额外的东西。我能想到的唯一一件事是，你需要在父项之前定义子项，这是我在最初的帖子中忽略的，现在我已经对它进行了更新。给我错误的是“passedFunction=（）=>{}”，它似乎与我的网页配置不兼容

class Parent extends Component {
   passedFunction = () => {};
   render() {
       <Child passedFunction={this.passedFunction} />;
   }
}

class Child extends Component {
   render() {
       <div onClick={this.props.passedFunction} />;
   }
}