Reactjs - 将 API 数据作为道具传递给自动完成组件（Material-UI）

Question

我是 Reactjs 的初学者。 我正在尝试实现 material-ui 提供的自动完成组件。 我想将 API 链接作为道具传递给元素。 但是如何将 json label 名称作为要在“getOptionLabel”中使用的道具传递？ 例如，如果我们考虑这个返回电视节目名称的 API 链接，我们需要使用 SHOW.NAME 来访问节目的名称。

getOptionLabel={(option) => option.show.name}

这里，动态部分是“show.name”。 如何将此作为道具传递？ 我试着做

const label = 'show.name'

接着

getOptionLabel={(option) => option.label}

但他的行不通。

Answer 1

您需要通过 function 中的道具。 你可以这样做：

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" / >
    }
    />
  );
}

在这里看到它