如何添加多个元素，例如<span>，</span> <p> <span>要么</span> <div> <span>内</span> <option> <span>的标签</span> <select> <span>在ReactJs中？</span>

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> 。 在这里检查