Question

将组件推送到阵列的方法是什么？

days.push(

        <Day day={day}
          selected={selected}
          select={select}/>
      );

我阅读了这段代码但却无法理解其中的一些内容。

class Week extends React.Component {
  render() {
    let days = [];
    let {date,} = this.props;
    const { month,selected,select, } = this.props;
    console.log(`Inside weeks ${month.toString()}`);
    console.log(`Selected weeks ${selected.toString()}`);


    for (var i = 0; i < 7; i++) {

      let day = {
          name: date.format("dd").substring(0, 1),
          number: date.date(),
          isCurrentMonth: date.month() === month.month(),
          isToday: date.isSame(new Date(), "day"),
          date: date
      };



      days.push(

        <Day day={day}
          selected={selected}
          select={select}/>
      );
      console.log(`days inside return is ${days.selected}`);
      date = date.clone();
      date.add(1, "day");
    }


    return (

      <div className="row week" key={days[0]}>
        {days}
      </div>
    );
  }

}

我对代码中的这一步感到非常困惑，除了将属性传递给另一个类之外，它还被推送到一个数组，后来又返回了

<div className="row week" key={days[0]}>
        {days}
      </div>

Answer 1

这是一种在循环内动态渲染元素的方法。你渲染它们并将它们推入一个数组然后渲染数组（因为数组是由反应元素构成的，它只会渲染）。看看这里：Loop inside React JSX

将组件推送到数组并传递道具的方法

1 个答案: