如何在ReactJs中的<span>、<p>或<div>的<option>标记中添加多个元素？

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来修剪/操作字符串，而不是使用样式。

正如您已经注意到的，选项标记中不允许使用<span>。检查这里