如何在渲染函数中附加下拉选项？

Question

下面是我的代码。 this.Resources 的 console.log 结果如下所示

1:"Basavaraj" 2:"Ashuthosh" 3:"Sravan" 4:"Raghavendra" 5:"Prem kumar" 6:"Simran" 7:"Namratha" 8:"Ghanashri" 9:"Ravindra" 10:"Anand" 11:"Shaeen"

render() {

 console.log(this.Resources);
 const options = this.Resources.map((item, index) =>{
 <option key={index} value={item}>{item}</option>
 });

  return (
    <div>
    <form>
    <div id="select">
    <div className="container select">
    <div  className="row">
      <select  className="col-4 selectpicker input-large">
        <option value="" disabled selected>Select resouce</option>
        {options}
      </select>

我希望 this.Resources 中的所有数据都应该出现在 select 下拉选项中。

提前致谢

Answer 1

您没有return将map.Need中的html转换为return。

const options = this
  .Resources
  .map((item, index) => {
    return (
      <option key={index} value={item}>{item}</option>
    );
  });

或

默认的 ECMA6 箭头表示法 return:

const options = this
  .Resources
  .map((item, index) => (
    <option key={index} value={item}>{item}</option>
  ));

如何在渲染函数中附加下拉选项？

how to append drop down options inside render function?

javascript

reactjs

tsx