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

状态变量在自定义方法中设置（它在此处添加的时间过长）。我得到的警告是

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

./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}/>)）

正确的方法是传递与您的值绑定的函数，因此它在render：

执行

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

或者，更好的是，直接直接导出UserPlate并执行类似的操作：

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

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

1 个答案: