array.map() 在 React JS 中一起返回元素

Posted 2023-02-14

【中文标题】array.map() 在 React JS 中一起返回元素

【英文标题】：array.map() is returning elements all together in React JS

【发布时间】：2022-01-19 05:29:56

【问题描述】：

const test = () = 

const array = ['hello', 'myNameIs']

return (


array.map((arr) => (
  <div>arr</div>
  <button>Edit</button>
  )


)

这个 .map() 方法没有按我的预期工作。

通过代码，我试图得到

hello [button]
myNameIs [button]

像这样。

但是当我实际渲染代码时，我得到了

hello MynameIs [button]

在这种情况下，如何更改 .map() 语句？

我应该使用索引吗？

【参考方案1】：

您没有使用正确的箭头函数语法 它应该像 const test = ()=> React 组件 JSX 应该返回一个父容器尝试像这样包装它：

 const Test = () => 
    const array = ["hello", "myNameIs"];

    return (
      <>
        array.map((arr) => 
          return (
            <>
              <div>arr</div>
              <button>Edit</button>
            </>
          );
        )
      </>
    )
  

这里是工作代码沙箱链接https://codesandbox.io/s/kind-easley-jxiei?file=/src/App.js:57-336

希望对你有帮助。

【参考方案2】：

const test = () = 
  const array = ['hello', 'myNameIs']
  return (

  array.map((item,key) => (
    <div key=item>item</div><button>Edit</button>
  ))

【讨论】：

谢谢阿克谢！我忘记写return了！

【参考方案3】：

看看下面的例子，我几乎是用你的代码创建的，它按照你的预期工作，没有问题。

function App() 
  const array = ['hello', 'myNameIs'];
  return array.map(item => (
    <div key=item>
      item <button>Edit</button>
    </div>
  ));


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

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

【讨论】：

谢谢你。很高兴看到详细的解释。

【参考方案4】：

在div 标记内创建按钮。您也可以根据需要使用样式来对齐项目

array.map((arr) => (
  <div>arr <button>Edit</button></div>
 )

【讨论】：

再次，得到相同的答案:( IDK 发生了什么！