简体   繁体   中英

How get children array from parent component in ReactJS?

I have a component that has children like this (JSX):

<div>
    <ChildComponent />
    <OtherChildComponent />
</div>

The parent has a method where it needs to query all the children to get some info from them. How do I do something like this:

(Pseudo code)

makeData()
{
    for ( var i  = 0; i < this.children.length; i++ )
    {
        console.log( this.children[i].getValue() );
    }
}

this.props.children won't work since that's children passed down from the parent. And if I store the children that's passed into the constructor , that's an empty object. How do I do this?

I don't want to have to create a ref for each child either (that seems like hard coding).

If you need the state of your children in your parent component, that's the place where it should be in the beginning.

After reading More about refs in the official documentation, it should be clear that it should be used in only a few circumstances and you'd be much better server of organizing and handling the state in your parent component and passing only the relevant data further to the children.

Summary

Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive props and state. They should, however, not be your go-to abstraction for flowing data through your application. By default, use the Reactive data flow and save refs for use cases that are inherently non-reactive.

...

If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use refs to "make things happen" – instead, the data flow will usually accomplish your goal.

You can pass a function as a prop to children and call it when they're mounted.

In your parent:

class Parent extends Component {
  constructor(props) {
    super(props)
    this.values = []
  }

  addValue(value) {
    this.values.push(value)
  }

  render() {
    return (
      <div>
        <Child addValueToParent={ this.addValue } />
        <Child addValueToParent={ this.addValue } />
        <Child addValueToParent={ this.addValue } />
      </div>
    )
  }
}

In your child:

class Child extends Component {
  componentDidMount() {
    this.props.addValueToParent("foo")
  }

  render() {
    ...
  }
}

However, when you can, it's always better to store data directly in the state of the parent.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM