如何渲染在APP不同地方定义的同一个React组件实例？

Question

Let's suppose that I have 2 top level components, A and B. The component C will be created inside of both A and B. How do I ensure that the same instance of C is created in both. Ie, they are in sync, whatever happens to one the other will automatically update as well.

I have tried assigning the same key value to both, but it didn't work.

Answer 1

That is not possible as described. React elements in different parts of the tree will always result in different instances.

The most common way to synchronize the behavior of two parts of the component tree is to lift state up , to a component which is the common ancestor of both components. This ancestor component implements the logic and state for both descendants, and passes the necessary values down via props (or context if necessary)