如何在 semantic-ui 反应的下拉列表的文本字段中添加新行？

Question

这是渲染函数

render(){
    const { members, user } = this.props;
    let memberOptions = [];
    members.forEach((member, i) => {
      memberOptions.push({
        key: i,
        text: member.user.name,
        value: member.user.id,
        image: { avatar: true, src: member.user.gravatar },
      });
    });
    return (
      <Dropdown placeholder='Select User' fluid selection options={memberOptions} />
    )
  }

这将完美呈现。但我还想在新行 的文本字段中再添加一个文本（比如电子邮件）。所以下拉项显示类似于：https://react.semantic-ui.com/elements/list#list-example-relaxed

我怎样才能做到这一点？

Answer 1

Akhila，我建议您使用 content 道具而不是 text 道具用于您从 [=14= 渲染的 Dropdown.Item ] 大批。 text 道具特别需要一个字符串。 content 属性将接受任何内容，包括其他 React 组件或节点。因此，您可以对内容执行类似的操作，而不是将 text 作为字符串返回，可能作为组件上的单独 class 方法：

const renderItemContent = (member) => {
  const {
    email,
    name,
  } = member.user;

  const emailStyle = {
    color    : '#333',
    fontSize : '.875em',
  }

  return(
    <React.Fragment>
      {name}
      {email &&
        <div style={emailStyle}>{email}</div>
      }
    </React.Fragment>
  )
}

然后在您的 memberOptionsArray 上设置 content: this.renderItemContent(member)。