如果我想替换选项
<option value="A">Apple</option>
<option value="B">Banana</option>
在给定的示例中，在 react jsx 文件中使用数组，我将如何进行？
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
</select>
如何使用数组作为react选择组件的选项
IT技术
select
reactjs
2021-04-22 12:29:13
3个回答
因为它只是 javascript，所以有一百万种方法。我通常采取的方式是映射容器以生成胆量。for 循环或其他任何东西也可以正常工作。
const Answer = react.createClass({
render: function() {
var Data = ['this', 'example', 'isnt', 'funny'],
MakeItem = function(X) {
return <option>{X}</option>;
};
return <select>{Data.map(MakeItem)}</select>;
}
};
或者在更现代的 es6 中，你可以
const Answer = props =>
<select>{
props.data.map( (x,y) =>
<option key={y}>{x}</option> )
}</select>;
您通常需要提供一个唯一的密钥以确保 React 可以识别项目，您可以使用 uuid 或您手头的密钥来执行此操作，例如
<Select name={field}>
{FBButtons.map(fbb =>
<option key={fbb.key} value={fbb.key}>{fbb.value}</option>
)};
</Select>
您还可以将常量抽象到另一个文件中并导入它们。
import {myconstants} from "../constants";
{myconstants.map((x,y) => <option key={y}>{x}</option>)}