reactjs - 如何使这样的选项映射不是 JSX？

Question

不是在jsx的上下文中，而是在函数的上下文中遍历数组？

import React from "react";
import "./styles.css";

export default function App() {
  const array = [
    {
      title: "Hello",
      desc: "World"
    },
    {
      title: "Hello",
      desc: "World"
    },
    {
      title: "Hello",
      desc: "World"
    },
    {
      title: "Hello",
      desc: "World"
    }
  ];

  const onHandleOption = () => {
    return array.map(items => {
      return items.title;
    });
  };

  return (
    <div className="App">
      <select defaultValue="0">
        <option>{onHandleOption}</option>
      </select>
    </div>
  );
}

<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>

我正在尝试这样做，但它没有成功......但是如果你在 jsx 上下文中应用它，那么一切正常，但我想让我的代码更干净

标签： reactjs

Answer 1

您将它们全部映射到同一个option标签中。

如果您想保留为单独的功能，请尝试以下操作：

const renderOptions = () => {
  return array.map(item => {
    // Your items don't seem unique so the key here may not work.
    return <option key={item.title}>{item.title}</option>;
  });
};

...

<select defaultValue="0">
  {renderOptions()}
</select>