Reactjs - 将字符串转换为HTML

Question

我的代码有一个问题。我得到字符串 “1234”， 并且它不会呈现正确的。 我会发布代码和图片，这样你就可以看到发生了什么。

    var valuteArray = ["USD", "AUD", "BGN", "BRL", "CAD", "CHF", "CNY", "CZK", "DKK", "GBP", "HKD", "HRK", "HUF", "IDR", "ILS", "INR", "JPY", "KRW", "MXN", "MYR", "NOK", "NZD", "PHP", "PLN", "RON", "RUB", "SEK", "SGD", "THB", "TRY", "ZAR", "EUR"];

     class Valute extends Component {
      render(){
      var currencyOptions = "";
      valuteArray.forEach((valuta) => currencyOptions += '<option>' + valuta + '</option>')
          return(
            <select className="btn btn-primary dropdown-toggle col-md-3">
              <option hidden> Choose your currency </option>
              {currencyOptions}
            </select>
          );
         }
        }

这是来自Chrome - Elements

的图片

Answer 1

因为您将它们视为字符串，请不要忘记我们写JSX。

<强> JSX ：

  

从根本上说，JSX只为其提供语法糖    React.createElement(component, props, ...children)功能。

像这样写：

var currencyOptions = [];
valuteArray.forEach(valuta => currencyOptions.push(<option key={valuta} value={valuta}>{valuta}</option>)

或者您可以直接使用 #array.map ：

<select className="btn btn-primary dropdown-toggle col-md-3">
  <option hidden> Choose your currency </option>
  {
    valuteArray.map(valuta => <option key={valuta} value={valuta}>{valuta}</option>)
  }
</select>

还为每个动态创建的元素分配键。