我想将功能传递给子组件,但出现此错误。
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> } }
基本上是我想做的。
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> ) } });
似乎它是在React v16中引入的。因此,将函数从父代传递给子代的正确方法是什么?
我发现出了什么问题。这是因为react-grid-layout。我必须将其余的属性传递给孩子。
class Child extends Component { render() { var { passedFunction, ...otherProps } = this.props; return ( <div onClick={passedFunction} {...otherProps}></div> ); } }