react.js使DOM元素可用于顶级父主组件

Question

I need to execute click events (probably using EventTarget.dispatchEvent()) on certain DOM elements that are nested quite deeply in my component hierarchy. I need to trigger those click events from the top parent App component.

How would you approach this? I don't want to pass down a callback function to each of those components as they are nested so deeply. Is there away of making their DOM elements available globally / to the parent App component?

Answer 1

Three options:

1. Pass the function down with React's context.
2. Move the child up to be in the App components render and then use this.props.children to render it in one of the App's nested children.
3. Move the click event logic closer to the child component and use Redux/Flux to update the global state which the App can then access (for redux you could pass the function into the global state but this is not recommended as it's not serializable).

Option 1 is the easiest but not recommended to use context if you can help it. Option 2 may not be possible. You probably want option 3.