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

Question

我有一个 LayoutComponent、PageComponent 和 SingleComponent。

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

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

为了在 LayoutComponent 上设置消息状态，我没有运气将 handlerMethod 正确传递给 SingleComponent。

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

布局组件:

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>
  }
}

Answer 1

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

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

应该是:

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

或者更简单地说:

handlerMethod: this.handlerMethod