将 Avatar（用户个人资料照片）添加到 Semantic UI React 的 Dropdown

Question

作为一个业余项目，我写了一个小应用程序，对于主题和布局，我使用了 React-Bootsrap。现在我正在尝试学习语义 UI React & 我不知道如何将用户个人资料照片添加到下拉列表中（最初是从 Github's dropdown 得到的）

这是 how it looks right now 在我的应用程序中使用 React Bootstrap

反应 Bootstrap 代码：

  <NavDropdown
      alignRight
      title={<StyledUserIMG src={user.photoURL} alt='userPhoto' />}
    >
      <NavDropdown.ItemText>
        Signed in as <b>{user.displayName}</b>
      </NavDropdown.ItemText>
      <NavDropdown.Item onClick={async () => await signOut()}>
        <b>Sign Out </b>
        <i className='fas fa-sign-out-alt'></i>
      </NavDropdown.Item>
    </NavDropdown>

语义UI代码（我目前拥有的）：

<Dropdown item>
  <Dropdown.Item>
    Signed in as <b>{user.displayName}</b>
  </Dropdown.Item>
  <Dropdown.Item onClick={async () => await signOut()}>
    <b>Sign Out </b> <i className='fas fa-sign-out-alt'></i>
  </Dropdown.Item>
</Dropdown>

在此先感谢您，祝您一切顺利。

Answer 1

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

const friendOptions = [
  {
    key: 'Jenny Hess',
    text: 'Jenny Hess',
    value: 'Jenny Hess',
    image: { avatar: true, src: 'https://react.semantic-ui.com/images/avatar/small/jenny.jpg' },
  },
  {
    key: 'Elliot Fu',
    text: 'Elliot Fu',
    value: 'Elliot Fu',
    image: { avatar: true, src: 'https://react.semantic-ui.com/images/avatar/small/elliot.jpg' },
  },
  {
    key: 'Stevie Feliciano',
    text: 'Stevie Feliciano',
    value: 'Stevie Feliciano',
    image: { avatar: true, src: 'https://react.semantic-ui.com/images/avatar/small/stevie.jpg' },
  },
  {
    key: 'Christian',
    text: 'Christian',
    value: 'Christian',
    image: { avatar: true, src: 'https://react.semantic-ui.com/images/avatar/small/christian.jpg' },
  },
]

const DropdownExampleInline = () => (
  <span>
    Show me posts by{' '}
    <Dropdown
      inline
      options={friendOptions}
      defaultValue={friendOptions[0].value}
    />
  </span>
)

export default DropdownExampleInline

Answer 2

您可以将组件传递给 Dropdown 文本属性。
将图像作为组件传递给 'text' 属性。

const DropdownExampleDropdown = () => (
  <Dropdown 
      text={<span><Image avatar src={'https://react.semantic-ui.com/logo.png'} /></span>}
      options={optionsList}
   />
)

export default DropdownExampleDropdown

Answer 3

这与 Alex Court 建议的原理相同，只是不会抛出预期的文本错误。

发现于：

https://react.semantic-ui.com/modules/dropdown/#usage-trigger

import React from 'react'
import { Dropdown, Image } from 'semantic-ui-react'

export const DropdownMenu = () => (

const trigger = <Image avatar src={user.photoURL} />;

const options = [
  {
    key: 'user',
    text: (
      <span>
         Signed in as <strong>{user.displayName}</strong>
      </span>
    ),
    disabled: true,
  },
  
    {
      key: 'settings',
      text: 'Settings',
      icon: 'setting',
    },
    {
      key: 'signOut',
      text: 'Sign Out',
      icon: 'sign out alternate',
    },
  ];
return (

  <Dropdown trigger={trigger} options={options} />
)
}

将 Avatar（用户个人资料照片）添加到 Semantic UI React 的 Dropdown

Add Avatar (user profile photo) to Semantic UI React's Dropdown

javascript

reactjs

react-bootstrap

semantic-ui-react