javascript - 使用reactjs分割数组值

Question

这个问题已经有答案了:

How to render an array of objects in React? (6 个回答)

已关闭 5 年前。

我有一个像这样的数组:

["Daniel", "Adam", "Charlie", "Brad"]

我想将该数组放入 react 中。所以我期望这样的结果

<select>
    <option> Daniel </option>
    <option> Adam </option>
    <option> Charlie </option>
    <option> Brad </option>
</select>

我该如何解决这个问题？任何答案将不胜感激。

Answer 1

很简单。只需映射您的数组

class App extends React.Component {

      constructor() {
        super();
        this.state = {
          arr: ["Daniel", "Adam", "Charlie", "Brad"]
        }
      }


      render() {
      let {arr} = this.state;
        return (
          <select>
          {arr.map((x, i) => <option key={i}>{x}</option>)}
          </select>
        )
      }

    }

    ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>