Reactjs

Question

我是 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}

但是他的不行。

Answer 1

函数中需要传递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 - 传递 API 数据作为自动完成组件的道具 (Material-UI)

Reactjs - Passing API data as props for Autocomplete component (Material-UI)

javascript

api

autocomplete

material-ui