如何在Semantic-UI React下拉框的文本字段中添加换行？

Got it! To get multi-line text in your dropdown options, you just need to swap out the plain string text value with a custom React element—Semantic UI's Dropdown supports this perfectly. Here's how to adjust your code:

render(){
  const { members, user } = this.props;
  let memberOptions = [];
  members.forEach((member, i) => {
    memberOptions.push({
      key: i,
      // Replace plain string with a React element for multi-line content
      text: (
        <div style={{ whiteSpace: 'pre-line', padding: '4px 0' }}>
          {member.user.name}
          {member.user.email && <br />{member.user.email}}
        </div>
      ),
      value: member.user.id,
      image: { avatar: true, src: member.user.gravatar },
    });
  });
  return (
    <Dropdown placeholder='Select User' fluid selection options={memberOptions} />
  )
}

What’s changed: #

• Instead of passing a simple string to text, we’re using a <div> to wrap both the username and email. This lets us add line breaks and styling.
• The whiteSpace: 'pre-line' style ensures line breaks are rendered correctly (you could also use separate <div> elements for each line if you want more control over spacing).
• We added a quick check member.user.email && to avoid showing an empty line if a member doesn’t have an email on file.

This will make each dropdown option display the username on the first line and the email on the second—exactly the multi-line effect you want!

内容的提问来源于stack exchange，提问作者Coder