时间戳

首页 > 解决方案 > 如何在语义-ui反应的下拉文本字段中添加新行？

javascript - 如何在语义-ui反应的下拉文本字段中添加新行？

问题描述

这是渲染功能

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

我怎样才能做到这一点？

标签： javascriptreactjsdrop-down-menusemantic-uisemantic-ui-react

解决方案

Akhila，我建议您使用该content道具而不是您从阵列中渲染的text道具。该道具特别需要一个字符串。prop将接受任何东西，包括其他 React 组件或节点。因此，您可以对内容执行类似这样的操作，而不是作为字符串返回，也许可以作为组件上的单独类方法：Dropdown.ItemmemberOptionstextcontenttext

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

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

推荐阅读