Reactjs - 传递 API 数据作为自动完成组件的道具 (Material-UI)
Reactjs - Passing API data as props for Autocomplete component (Material-UI)
我是 Reactjs 的初学者。我正在尝试实现 Autocomplete component provided by material-ui. I want to pass the API link as a prop to the element. But how to pass the json label name as a prop to be used in "getOptionLabel"? For example, If we consider this API link 其中 returns 电视节目名称,我们需要使用 SHOW.NAME 来访问节目名称。
getOptionLabel={(option) => option.show.name}
这里动态部分是'show.name'。如何将其作为道具传递?我试过
const label = 'show.name'
然后
getOptionLabel={(option) => option.label}
但是他的不行。
函数中需要传递props。
你可以这样做:
export default function App() {
const someData = [{
name: "abc"
}]
return ( <
Autocomplete myOptions={someData} />
);
}
export default function ComboBox(props) {
return ( <
Autocomplete id = "combo-box-demo"
options = {
props.myOptions
}
getOptionLabel = {
(option) => option.name
}
style = {
{
width: 300
}
}
renderInput = {
(params) => < TextField { ...params
}
label = "Combo box"
variant = "outlined" / >
}
/>
);
}
现场观看here
我是 Reactjs 的初学者。我正在尝试实现 Autocomplete component provided by material-ui. I want to pass the API link as a prop to the element. But how to pass the json label name as a prop to be used in "getOptionLabel"? For example, If we consider this API link 其中 returns 电视节目名称,我们需要使用 SHOW.NAME 来访问节目名称。
getOptionLabel={(option) => option.show.name}
这里动态部分是'show.name'。如何将其作为道具传递?我试过
const label = 'show.name'
然后
getOptionLabel={(option) => option.label}
但是他的不行。
函数中需要传递props。 你可以这样做:
export default function App() {
const someData = [{
name: "abc"
}]
return ( <
Autocomplete myOptions={someData} />
);
}
export default function ComboBox(props) {
return ( <
Autocomplete id = "combo-box-demo"
options = {
props.myOptions
}
getOptionLabel = {
(option) => option.name
}
style = {
{
width: 300
}
}
renderInput = {
(params) => < TextField { ...params
}
label = "Combo box"
variant = "outlined" / >
}
/>
);
}
现场观看here