通过ref或prop改变React中的子组件？

Question

Say I have a child component. Let's say I want to change its height based on information that the parent has.

If I get a reference to it. I can change it with

myChild.changeHeight(newHeight);

(see React.js - access to component methods )

or I could change it with

<Child height={newHeight}/>

Both could be changed in the render() method. But which one should I use?

Answer 1

React team gave few scenarios where we should be using refs.

There are a few good use cases for refs:

• Managing focus, text selection, or media playback.
• Triggering imperative animations.
• Integrating with third-party DOM libraries.

Avoid using refs for anything that can be done declaratively.

If there is a possibility to do some functionality even without using refs, then go ahead and do it. In your case, as you said, you have a way to do it by passing a prop. It would be better if we use props itself rather than ref.