Этот код скопирован из исходного кода PrimeReact для выпадающих списков ..
https://github.com/primefaces/primereact/blob/master/src/components/dropdown/DropdownItem.js
render() {
let className = classNames('ui-dropdown-item ui-corner-all', {
'ui-state-highlight': this.props.selected,
'ui-dropdown-item-empty': (!this.props.label || this.props.label.length === 0)
});
let content = this.props.template ? this.props.template(this.props.option) : this.props.label;
return (
<li className={className} onClick={this.onClick}>
{content}
</li>
);
}
Как видите, {content}
отображается для каждого выпадающего элемента, который содержит только «метку».
let content = this.props.template ? this.props.template(this.props.option) : this.props.label;
Поэтому, если вы хотите показать «имя», вы должны поместить его в метку.
В демоверсии также используются только атрибуты "label" и "value".
https://www.primefaces.org/primereact/#/dropdown
РЕДАКТИРОВАТЬ кредиты @Chris G
Вы также можете визуализировать пользовательский контент, но затем вам нужно передать функцию шаблона в раскрывающийся список.
Их демонстрация показывает это.
carTemplate(option) {
if(!option.value) {
return option.label;
}
else {
var logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';
return (
<div className="ui-helper-clearfix">
<img alt={option.label} src={logoPath} style={{display:'inline-block',margin:'5px 0 0 5px'}} width="24"/>
<span style={{float:'right',margin:'.5em .25em 0 0'}}>{option.label}</span>
</div>
);
}
}
Которые затем передали его компоненту Dropdown.
<Dropdown value={this.state.car} options={cars} onChange={this.onCarChange} itemTemplate={this.carTemplate} style={{width:'150px'}} placeholder="Select a Car"/>