react传递函数到子组件

IT技术 reactjs react-grid-layout
2021-04-19 12:32:21

我想将函数传递给子组件，但出现此错误。

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

4个回答

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

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

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

考虑到旧版本的 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}/>
    }
}
嗨，我尝试这样做，但是 webpack 给了我一个错误，我需要它的插件吗？
2021-05-31 12:32:21
这不应该需要任何额外的东西。我唯一能想到的是，您需要在父级之前定义子级，这是我在原始帖子中忽略的内容，现在我已经对其进行了更新。
2021-06-02 12:32:21
'passedFunction = () => {}' 这给了我错误，它似乎与我的 webpack 配置不兼容
2021-06-18 12:32:21

您缺少 Child 组件上的绑定。 

this.props.passedFunction.bind(this)
如果您能根据左侧的正确分配进一步解释此处必须发生的事情，那就太好了。
2021-05-28 12:32:21
添加关于如何将组件传递给子组件的官方文档：reactjs.org/docs/faq-functions.html
2021-06-16 12:32:21

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

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

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

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

class Child extends Component {
    render() {
        var { passedFunction, ...otherProps } = this.props;
        return (
            <div onClick={passedFunction} {...otherProps}></div>
        );           
    }
}
其它你可能感兴趣的问题
上一篇使用 axios 向 SOAP 端点发出请求 下一篇React Hooks useCallback 导致孩子重新渲染