reactjs 反应传递函数到子组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48407785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Pass function to child component
提问by Lun Zhang
I want to pass a function to a child component but I'm getting this error.
我想将函数传递给子组件，但出现此错误。
Invalid value for prop passedFunction on <div> tag.
Invalid value for prop passedFunction on <div> tag.
class Parent extends Component {
passedFunction(){}
render() {
<Child passedFunction={this.passedFunction}/>
}
}
class Child extends Component {
render() {
<div onClick={this.props.passedFunction}></div>
}
}
Basically what I'm trying to do.
基本上就是我想要做的。
var ReactGridLayout = require('react-grid-layout');
var ReactGridLayout = require('react-grid-layout');
var MyFirstGrid = React.createClass({
passedFunction:function(){}
render: function () {
return (
<ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}>
<div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>
<div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
<div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}} passedFunction={this.passedFunction}>c</div>
</ReactGridLayout>
)
}
});
It seems it was introduced in React v16. Therefore, what is the correct way to pass a function from parent to child?
它似乎是在 React v16 中引入的。因此，将函数从父级传递给子级的正确方法是什么？
采纳答案by Lun Zhang
I found out what was wrong. It was because of react-grid-layout. I have to pass the rest of the properties to child.
我发现出了什么问题。这是因为反应网格布局。我必须将其余的属性传递给孩子。
class Child extends Component {
render() {
var { passedFunction, ...otherProps } = this.props;
return (
<div onClick={passedFunction} {...otherProps}></div>
);
}
}
回答by Benjamin Charais
Instead of having to bind your function in the constructor of the parent Class, you can use an arrow function to define your method so it is lexically bound using an arrow function
不必在父类的构造函数中绑定您的函数，您可以使用箭头函数来定义您的方法，以便使用箭头函数对其进行词法绑定
class Child extends Component {
render() {
<div onClick={this.props.passedFunction}></div>
}
}
class Parent extends Component {
passedFunction = () => {}
render() {
<Child passedFunction={this.passedFunction}/>
}
}
To Account for older version support of Javascript:
考虑到旧版本的 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}/>
}
}
回答by Ynahmany
You are missing bind on the Child component.
您缺少 Child 组件上的绑定。
this.props.passedFunction.bind(this)
回答by Rajesh Bhartia
If you can bind this function like this it will works
如果您可以像这样绑定此函数，它将起作用
class Parent extends Component {
passedFunction = () => {};
render() {
<Child passedFunction={this.passedFunction} />;
}
}
class Child extends Component {
render() {
<div onClick={this.props.passedFunction} />;
}
}
