反應：僅當條件為真時才呈現子項

Question

我是 React 的新手。 我正在開發一個屏幕，但我有一個問題，如果狀態條件相等，我不知道如何在父級中插入子級，我正在使用數組來打印父級和子級，但取決於父級的數據是否可以有孩子，例如 if (parent.rework_name === children.rework_name) ？ 打印孩子：'父母沒有任何東西'。

如果您知道如何解決這個問題，請告訴我，非常感謝。

這是目標，我的代碼有效，但該死的孩子在父母之外:(

    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>
    );
  }
}

我不知道如何在已經渲染的父級中插入子級。

Answer 1

我已經解決了，首先渲染所有父div，然后用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>
);

} }