React：如何将嵌套子组件中的元素传递给嵌套的父组件

Question

假设我有一个组件，其中一个道具可以接收一个元素（聚焦/设置任何attr / etc ..）。其中一个组件Children是一个具有Button元素的组件（将在DOM中可用）。如何在<Button ../>父组件中将此closeButtonContent元素引用/传递给<Dialog .. />道具？

在右边：<NewsletterWrapper /> 在左侧：<NewsletterConfirmed />

Answer 1

您可以将类或函数传递给property，然后在Dialog中，在children之后调用传递的组件。

https://codesandbox.io/s/2xjm9z9n2r

Answer 2

我建议只需将一个处理程序（将有关<Button />相关内容的参数）作为从<NewsletterConfirmed />向下<NewsletterWrapper />的道具传递，然后从<NewsLetterWrapper />调用处理程序需要的时候。 ref通常被认为是React中的反模式。

// in NewsLetterConfirmed
someHandler(buttonClassName) {
  // write your logic here
  if (buttonClassName === 'class1') {
    // ...
  }
}

render() {
  return (
    <NewsLetterWrapper handleButtonEvent={this.someHandler.bind(this)} />
  )
}

// in NewsLetterWrapper


render() {
  // For example, what you care about is the button's class name
  return (
    <Button className={this.state.buttonClassName} onClick={() => this.props.handleButtonEvent(this.state.buttonClassName)}>Click Me!</Button>
  )
}