javascript - 将reactjs中选项值的某些部分的字体粗细更改为粗体

Question

我有以下正在创建下拉列表的组件。我需要将下拉值的某些文本设置为粗体。我需要将下拉列表中的 ${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={() => (
         <span><strong>{status} {datasetIdText}</strong> {p.title} {scheduleDtText}</span>
    )}

还尝试将标签放在选项标签本身中，但这也不起作用并显示以下错误“仅支持字符串和数字作为子项

<option 
    className='data'
    key={index} 
    value={index} 
>
    <strong>{status} {dataIdText}</strong> {p.title} {scheduleDtText}
</option>

Answer 1

恐怕您无法在选项标记中添加标记。

相反，您可以创建一个像这样的下拉列表组件。

//DropdwonList.js

import React, { Component } from 'react';
import './style.css';

class DropdwonList extends Component {
    state = {
        isActive: false,
        activeLabel: ''
    }


    componentDidMount() {
        document.addEventListener('mousedown', this.handleClickOutside);
    }

    componentWillUnmount() {
        document.removeEventListener('mousedown', this.handleClickOutside);
    }

    /**
     * Set the wrapper ref
     */
    setWrapperRef = (node) => {
        this.wrapperRef = node;
    }

    toggleList = () => {
        this.setState((state) => ({...state, isActive: !state.isActive}))
    }

    close = () => {
        this.setState((state) => ({...state, isActive: false}))
    }

    handleClickOutside = (event) => {
        if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
            this.close()
        }
    }

    select = (item) => {
        const { onChange } = this.props;
        this.setState((state) => ({
            ...state,
            activeLabel: item.label
        }))

        onChange(item)
        this.close()
    }

    render() {
        const { list } = this.props;
        const { isActive, activeLabel } = this.state;
        return (
            <div className='dropdown-list' ref={this.setWrapperRef}>
                <span dangerouslySetInnerHTML={{__html: activeLabel ? activeLabel: list[0].label}} onClick={this.toggleList} />
                {/* you can replace dangerouslySetInnerHTML with: https://www.npmjs.com/package/react-html-parser */}
                <ul className={isActive ? 'active' : ''}>
                    {list.map((item) => {
                        return <li dangerouslySetInnerHTML={{__html: item.label}} onClick={() => this.select(item)} />
                    })}
                </ul>
            </div>
        )
    }
}

export default DropdwonList

//样式.css

.dropdown-list {
  display: inline-block;
  position: relative;
}

.dropdown-list span {
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 5px;
  display: block;
}

.dropdown-list ul {
  padding: 5px;
  margin: 0;
  list-style-type: none;
  display: none;
  border: 1px solid #cccccc;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-top: 0;
  margin-top: -1px;
  position: absolute;
  width: 100%;
  text-align: left;
}

.dropdown-list ul.active {
  display: block;
}

//你的组件

import React, {Component} from 'react';
import DropdwonList from './DropdwonList';

class Test extends Component {

  handleDropDown = (data) => {
    console.log('data', data) // { label: '...', value: '...'}
  }

  render () {
    return (
      <div>
        <DropdwonList
          list={[{label: '<strong>bold text</strong> noraml text', value: 'any value you want'}]}
          onChange={this.handleDropDown}
        />
      </div>
    );
  }
}

export default App;

或者您可以使用任何能够满足您需求的开源组件。