使用 ES6 在 React 中将一个函数传递给多个子组件

Passing a function down multiple children components in React using ES6

本文关键字：函数 组件 一个 React 使用 ES6      更新时间：2023-09-26

我有一个LayoutComponent，PageComponent，和SingleComponent。

当我的用户单击按钮时，我想在应用程序使用 Meteor FlowRouter路由到的NewPageComponent上向用户显示一条消息。

为此，我将消息存储在 LayoutComponent 的状态中，然后将此消息和handlerMethod作为 props 传递给 SingleComponent PageComponent，这是一个无状态的功能组件。

我没有任何运气将handlerMethod正确传递给SingleComponent以便在LayoutComponent上设置消息状态。

我知道这是一个简单的语法问题，但有人可以帮助我找到我的错误吗？

布局组件：

export default class LayoutComponent extends Component {
  constructor() {
    super();
    this.state = {
      message: null
    };
    this.handlerMethod = this.handlerMethod.bind(this);
  }
  handlerMethod(message) {
    this.setState({ message: message });
  }
  render() {
    // the PageComponent is actually passed via FlowRouter in this.props.content, so it needs to be cloned to add props
    let contentWithProps = React.cloneElement(this.props.content, { message: this.state.message, handlerMethod: ((message) => this.handlerMethod) });
     return (
       <div>{contentWithProps}</div>
     );
  }
}

页面组件：

const PageComponent = ({ message, handlerMethod }) => {
  return (
    <div>
      <SingleComponent message={message} handlerMethod={(message) => handlerMethod} />
    </ div>
  );
}

元件：

export default class SingleComponent extends Component {
  constructor() {
    super();
    this.state = {
    };
    this.handleButtonClick = this.handleButtonClick.bind(this);
  }
  handleButtonClick(event) {
    event.preventDefault();
    // do some more stuff...
    this.props.handlerMethod("You pressed the button!");
    FlowRouter.go("newPage");
  }
  render() {
    <div>
      <button onClick={this.handleButtonClick}>button</button>
    </div>
  }
}

您实际上并没有在发布的代码中调用您的handlerMethod。所以这个：

handlerMethod: ((message) => this.handlerMethod)

应为：

handlerMethod: ((message) => this.handlerMethod(message))

或者更简单地说：

handlerMethod: this.handlerMethod

你的错误在于你传递了一个将返回this.handlerMethod而不是调用它的函数：

handlerMethod: ((message) => this.handlerMethod) // this returns the handlerMethod function, doesn't call it

应该是

handlerMethod: ((message) => this.handlerMethod(message))

您也可以直接传递它：

handlerMethod: this.handlerMethod

直接传递它的原因是因为你在构造函数中绑定了handlerMethod的上下文以进行LayoutComponent，这意味着handlerMethod内部的this将被固定为LayoutComponent(见下面的注释(

下面是一个简短的示例：

布局组件

export default class LayoutComponent extends Component {
  constructor() {
    // ...
    this.handlerMethod = this.handlerMethod.bind(this); // handler is bound
  }
  handlerMethod(message) {
    // ...
  }
  render() {
    let contentWithProps = React.cloneElement(
      this.props.content, { 
        message: this.state.message, 
        handlerMethod: this.handlerMethod // pass the handler directly
      }
    );
    return <div>{contentWithProps}</div>;
  }
}

页面组件

// pass the handlerMethod directly
const PageComponent = ({ message, handlerMethod }) => {
  return (
    <div>
      <SingleComponent message={message} handlerMethod={handlerMethod} />
    </ div>
  );
}

单组分

export default class SingleComponent extends Component {
  // ...
  handleButtonClick(event) {
    // ...
    this.props.handlerMethod("You pressed the button!"); // call the passed method here
    // ...
  }
  // ...
}

注意：从技术上讲，您可以通过调用new this.handlerMethod来覆盖绑定this，但这并没有发生，所以你没事。

如果你只是想向下传递方法，你可以这样做：

const PageComponent = ({ message, handlerMethod }) => {
  return (
    <div>
      <SingleComponent message={message} handlerMethod={handlerMethod} />
    </ div>
  );
}
相关文章：