我开始在react和material ui中开发一个新的应用程序,遇到了一个问题:
错误:React.CloneElement(。。。):参数必须是React元素,但您传递的参数未定义。
因此,我还没有编写任何逻辑代码,我只是从react和material UI开始。 这个问题的解决方案和指导将会非常有帮助。
下面是代码:
import React from 'react';
import { MenuItem, FormControl, Select } from "@material-ui/core";
import './App.css';
function App() {
return (
<div className="app">
<h1></h1>
<FormControl className="app_dropdown">
<Select variant = "Outlined" value = "abc">
<MenuItem value="worldwide">Worldwide</MenuItem>
<MenuItem value="worldwide">Option 2</MenuItem>
<MenuItem value="worldwide">Worldwide</MenuItem>
<MenuItem value="worldwide">Worldwide</MenuItem>
</Select>
</FormControl>
{/* { Header } */}
{/* { Title + Select input dropdown field } */}
{/* { Info Box1 } */}
{/* { Info Box2 } */}
{/* { Info Box3 } */}
{/* { Table } */}
{/* { Graph } */}
{/* { Map } */}
</div>
);
}
export default App;
variant
应该是小写的oultrated
,并且还请传递value
和onchange
道具以进行选择
function App() {
const [country, setCountry] = useState("")
return (
<div className="app">
<h1></h1>
<FormControl className="app_dropdown">
<Select variant = "outlined" value = {country} onChange={(e) => setCountry(e.target.value)}>
<MenuItem value="India">India</MenuItem>
<MenuItem value="USA">USA</MenuItem>
<MenuItem value="UK">UK</MenuItem>
</Select>
</FormControl>
</div>
);
}
export default App;
看起来物料UI的select
组件的variant
属性区分大小写。
它允许值“填充”“概述”“标准”
因此,要解决这个问题,只需将outlited
制作成outlited
<Select variant = "outlined" value = "abc">