反应：仅当条件为真时才呈现子项

Question

I'm new in React. I'm developing a screen but I have a issue, I don't know how insert the children in the parent if the state condition is equals, I'm using an array to print the parent and children but depends of the data the parent could have a children or not, for example if (parent.rework_name === children.rework_name) ? print the children : 'nothing in the parent'.

Please let me know if you have an idea how to solve this, many many thanks in advance.

This is the goal, my code works but the damn children is outside the parent :(

    class Filling extends Component {

  constructor() {
    super();

    this.state = {
      fillingStations: [],
    };
  }

  componentDidMount() {

    getDataAPI('http://localhost:8080/api/parent')
      .then((station) => {

        getDataAPI('http://localhost:8080/api/children')
          .then((data) => {

            const stationArray = [];

            station.map((item, index) => {

              stationArray.push(
                <ReworkStation key={index} title={index + 1} status='' />,
              );

              data.map((it, idx) => {

                const f2Date = it.f2_time.substr(0, 10);
                const f2Hour = it.f2_time.substr(11, 8);
                const f2DateFormatted = `${f2Date.substr(8, 2)}/${f2Date.substr(5, 2)}/${f2Date.substr(0, 4)}`;
                const color = selection_color(it.color_d);

                return (
                  stationArray.push(item.rework_name === it.rework_name && <ReworkTitle key={idx} vin={it.vin} date={f2DateFormatted} ipsq={it.defects} hour={f2Hour} color={color} />)
                );
              });

            });

            console.log(stationArray);

            this.setState({
              fillingStations: stationArray,
            });

          });

      });

  }

  render() {

    return (
      <div className='row'>
        { this.state.fillingStations }
      </div>
    );
  }
}

I don't know how to insert the children inside the parent already render.

Answer 1

I already solved, first render all the parent divs and after replace the position array with array.splice

render() {

const array = [];
this.state.fillingStations.map((item, index) => (

  array.push(<Parent key={index} title={index + 1} status='' />),

  this.state.fillingChildren.map((it, ind) => {

    if (item.name === it.name) {

      parent.splice(index, 1,
        <Parent {...this.props}}>
          <Child {...this.props} />
        </Parent >);
    }
  })

));

return (
  <div className='row'>
    {array}
  </div>
);

} }