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

Question

Reactjs is not allowing to add any html tags inside option tag. It only accepting one string enclosed by { }
I want to give some fixed width to the span.

Tried:-

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>

Code:-

    <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>

I want to apply fixed width to the spans.

Answer 1

To make the option value to fixed width, I guess we should trim/manipulate the string using JS, instead of the styling.

As you already noticed, the <span> is not allowed inside the option tag. Check here