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支柱，用于从Dropdown.Item阵列渲染的memberOptions 。 text道具特别期望一个字符串。 content道具将接受任何内容，包括其他React组件或节点。因此，不是将text作为字符串返回，而是可以对内容执行类似的操作，也可以作为组件上的单独类方法：

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

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

1 个答案: