如何在ReactJs的<select>的<option>标记内添加多个元素，例如<span>，<p>或<div>？

Question

Reactjs不允许在选项标签内添加任何html标签。它仅接受由{}
括起来的一个字符串 我想给跨度设置一些固定的宽度。

尝试：-

1.    {<span>{country.iso_code}</span>
      <span>{country.dialing_code}</span>}

2.    <span>{country.iso_code}</span>
      <span>{country.dialing_code}</span>

3.    <Fragment><span>{country.iso_code}</span>
        <span>{country.dialing_code}</span></Fragment>

代码：-

    <select className={styles.selectCompany}
     name="country_code"
     value={this.state.personFields["country_code"]}
     onChange={this.handlePersonFieldsChange}>
     <option value="" disabled>Select</option>
     {
       this.props.countryList ?
       this.props.countryList.map((country, index) => {
       return (
         <option value={country.dialing_code} key={"code_" + index}>
          {country.iso_code +" +"+ country.dialing_code}
          //This is working line-i.e.only one string line
          {
            <span>{country.iso_code}</span>
            <span>{country.dialing_code}</span>
          }
         </option>
        )
      })
     : ''
     }
   </select>

我想对跨度应用固定宽度。

Answer 1

要将选项值设置为固定宽度，我想我们应该使用JS（而不是样式）来修剪/操纵字符串。

您已经注意到，选项标签内不允许DataframeB。选中here