Question

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

1： “Basavaraj” 2： “Ashuthosh” 3： “Sravan” 4： “Raghavendra” 5：“Prem kumar” 6： “SIMRAN” 7： “Namratha” 8： “Ghanashri” 9： “拉温德拉” 10： “阿南” 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

你没有在map中返回html。需要返回它。

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

OR

ECMA6箭头符号，默认返回：

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

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

1 个答案: