Question

我是React的新手。我正在开发屏幕，但是有一个问题，如果状态条件相等，我不知道如何在父级中插入子级，我正在使用数组来打印父级和子级，但取决于父级的数据是否可以有孩子，例如，如果（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

<TextBox
    x:Name="Tb_fps"
    Grid.Column="0"
    Margin="4,4,0,4"
    HorizontalAlignment="Stretch"
    x:FieldModifier="private"
    Text="{Binding FPS, UpdateSourceTrigger=PropertyChanged}">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="LostFocus">
            <i:InvokeCommandAction Command="{Binding LostFocusCommand}" />
        </i:EventTrigger>
        <i:EventTrigger EventName="GotFocus">
            <i:InvokeCommandAction Command="{Binding GotFocusCommand}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</TextBox>

} }

反应：仅当条件为真时才渲染子级

1 个答案: