javascript - 将字体粗细更改为粗体以获取 reactjs 中的下拉值

Question

我有以下代码作为返回。它正在创建一个下拉值。我想将 ${status} 和 ${dataIdText} 的下拉值的字体粗细更改为粗体

   <Modal.Body className="container-fluid">
  <div className='row'>
    <label className='col-sm-4' htmlFor='portalSelector'>Exiting item: </label>
    <select className='col-sm-8' id='portalSelector' onChange={this.onSelectionChange} value={this.state.selectedItem}>
      <option key='-1' label='--Make a selection--' value='-1' />
      {((dataId === '') ? stateVar : stateVar.filter((val)=> (val.dataId +"") === dataId )).map((p, index) => {
        const status = p.status === 'PENDING' ? '' : p.status === 'SENT'?'':'Unscheduled'
        const dataIdDef = datasets.filter((val)=> val.dataId === p.dataId )[0]

        const dataIdText = p.dataId === -1? '' : `${dataIdDef.dataIdname} - `

        const scheduleDtText = p.scheduleDt === 5711817600000 ? '' : 'scheduled for ' + moment(p.scheduleDt).format('DD/MM/YYYY HH:mm')
        return (<option 
          className='data'
          key={index} 
          value={index}               
          label={`${status} ${dataIdText} ${p.title} ${scheduleDtText}`}>

        </option>)
      }
      )}
    </select>
  </div>
</Modal.Body>

我曾尝试删除 label 属性并将文本放在 Options 标签本身内，但没有成功。

Answer 1

试试这个形状

  label={()=>( <span className="bold">{status}<span className="bold"> {datasetIdText}<span/> {p.title} {scheduleDtText}`}>