如何遍历数组并在JSX中显示datalist？

Question

我正在尝试从React中的数组生成数据列表。当我传入数组时，我可以成功迭代它并将'city'值记录到控制台。

当我在没有JSX的情况下执行相同的.map迭代时，编译器声明'city'未定义

class CityList extends React.Component {
    render(props) {
        const cities = this.props.cities;

        cities.map(function(city) {
          console.log(city);
        });

        return (
          <datalist id="cities-list">
            cities.map(function(city) {
              <option value={city}></option>
            });
          </datalist>
        );
    }
}

如何在JSX中成功输出值？

Here's a codepen证明了错误。

Answer 1

你在cities.map围绕JSX忘记了大括号！

https://codepen.io/joepmeindertsma/pen/bYbXrW?editors=0010#0

return (
  <datalist id="cities-list">
    {cities.map(function(city) {
       <option value={city}></option>
    })}
  </datalist>
);