【问题标题】:Split array value using reactjs [duplicate]使用reactjs拆分数组值[重复]
【发布时间】:2018-07-10 04:25:07
【问题描述】:

我有一个这样的数组:

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

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

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

我该如何解决?任何答案将不胜感激。

【问题讨论】:

  • 欢迎来到 Stack Overflow!请使用tour 并通读help center,尤其是How do I ask a good question? 做你的研究,search 以获取有关 SO 的相关主题,然后试一试。 如果您在进行更多研究和搜索后遇到困难并且无法摆脱困境,请发布您的尝试minimal reproducible example,并具体说明您遇到的问题。人们会很乐意提供帮助。祝你好运!

标签: javascript reactjs


【解决方案1】:

你可以在数组上使用map

let a = ["Daniel", "Adam", "Charlie", "Brad"];

<select>
    {
        a.map((item , index) => <option key={index}> {item} </option>)
    }
</select>

【讨论】:

  • 不要忘记为每个选项元素设置唯一键。否则 React 会给出警告。
  • @HimanshuArora9419 当然是的
  • 非常感谢,这对像我这样的初学者很有帮助。 :)
  • 不客气 :)
【解决方案2】:

这很简单。只需 map 覆盖您的 array

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>

【讨论】:

    猜你喜欢
    • 2017-12-05
    • 2012-11-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-13
    • 2021-05-04
    • 1970-01-01
    相关资源
    最近更新 更多