Question

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

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（＆＃39; react-grid-layout＆＃39;）;

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中引入的。因此，将函数从父级传递给子级的正确方法是什么？

Answer 1

您不必在父类的构造函数中绑定函数，而是可以使用箭头函数来定义方法，以便使用箭头函数进行词法绑定

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

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

Answer 2

您在Child组件上缺少绑定。

this.props.passedFunction.bind(this)

Answer 3

我发现了什么问题。这是因为反应网格布局。我必须将其余属性传递给孩子。

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

Answer 4

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

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

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

React Pass函数到子组件

4 个答案: