警告：道具类型失败：提供给 DropdownItem 的道具 as 无效

Question

代码如下：

import UserPlateFunction from './components/UserPlate';
import {Form, Dimmer, Loader, Message, Header, Dropdown} from 'semantic-ui-react';
import UserPlateFunction from './components/UserPlate';

       class Setting extends Component {
       render(){
       const {members} = this.state;
       return(
          <Dropdown>
                <Dropdown.Menu>
                {Object.keys(members).map((key, i) => {
                    return (
                      <Dropdown.Item 
                      as={UserPlateFunction(members[key].user.gravatar)}
                      />
                      ) 
                  })
              } </Dropdown.Menu>
                </Dropdown>
             )
        }
    }

状态变量在自定义方法中设置（这里太长了就不加了）。我收到的警告是

警告：道具类型失败：提供给 DropdownItem 的道具 as 无效。

./components/UserPlate

import './index.css';
import PropTypes from 'prop-types';
import React from 'react';

let UserPlate = ({gravatar}) => (
  <div className="clearfix">
     <div className="user-img">
       <img src={gravatar} alt='this one'/>
      </div>
  </div>
);



UserPlate.propTypes = {
  gravatar : PropTypes.string.isRequired,
 };

function UserPlateFunction(image){
  return (<UserPlate  gravatar={image}/>)
}

export default UserPlateFunction;

知道出了什么问题吗？提前致谢。

Answer 1

您需要提供函数或 HTML 元素的名称。你正在返回一个 React 组件。 (return (<UserPlate gravatar={image}/>))

正确的方法是传递与您的值绑定的函数，因此它在渲染时执行：

as={UserPlateFunction.bind(null, members[key].user.gravatar)}

或者，更好的是，直接导出 UserPlate 并做类似的事情：

as={UserPlate.bind(null, {
  gravatar: members[key].user.gravatar}
)}

警告：道具类型失败：提供给 DropdownItem 的道具 as 无效

Warning: Failed prop type: Invalid prop `as` supplied to `DropdownItem`

reactjs

semantic-ui-react