如何在React中呈现多个元素的列表？

Question

寻找将const days = ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"];呈现给<div className="segment">的解决方案。是否可以为输入标签元素制作渲染列表。

演示：https://codesandbox.io/s/536wmpj3mp

export class Segment extends React.Component {
  render() {
    const days = ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"];
    return (
      <div className="segment">
        <input type="radio" id="day-1" name="day" value="Tay 1" />
        <label className="segment-button" htmlFor="day-1">
          day 1
        </label>
        <input type="radio" id="day-2" name="day" value="Tay 2" />
        <label className="segment-button" htmlFor="day-2">
          day 2
        </label>
        <input type="radio" id="day-3" name="day" value="Tay 3" />
        <label className="segment-button" htmlFor="day-3">
          day 3
        </label>
        <input type="radio" id="day-4" name="day" value="Tay 4" />
        <label className="segment-button" htmlFor="day-4">
          day 4
        </label>
        <input type="radio" id="day-5" name="day" value="Tay 5" />
        <label className="segment-button" htmlFor="day-5">
          day 5
        </label>
      </div>
    );
  }
}

Answer 1

您可以使用map元素：

import React from "react";

export class Segment extends React.Component {
  render() {
    const days = ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"];

    return (
       <div className="segment">
       {
         days.map((d, i) => {
          return(
            <div>
              <input type="radio" id={`day-${i + 1}`} name="day" value={`Tay ${i + 1}`} />
              <label className="segment-button" htmlFor={`day-${i}`}>{d}</label>
            </div>
           )
         })
        }
       </div>
    );
  }
}