反應將對象數組傳遞給使用不同鍵的組件

Question

我正在嘗試渲染一個由 React 生成的動態<select>元素： input-select組件（見下文），采用一個對象數組，每個對象都必須包含<option>及其標題的值。

export default function InputSelect (props) {
  return (
    <label className="form__element">
      {props.caption}
      <select className="input-select">
        {props.items.map((item, i) => <option key={i} value={item.value}>{item.caption}</option>)}
      </select>
    </label>
  )
}

當我嘗試傳遞像這樣的對象數組時，這成為一個問題：

[
  {code: "IT", name: "Italy"},
  {code: "US", name: "United States"},
]

我有不同的鍵，我無法更改，因為這些數據是從數據庫中檢索的。

我怎樣才能解決這個問題？

Answer 1

假設您擁有InputSelect組件，您可以讓它從props獲取caption和value鍵，如下所示：

 const { Fragment } = React const countries = [ {code: "IT", name: "Italy"}, {code: "US", name: "United States"}, ] const languages = [ {value: 'IT', caption: 'Italiano'}, {value: 'DE', caption: 'Tedesco'} ] const App = props => ( <Fragment> <InputSelect caption="Country" items={countries} captionKey="name" valueKey="code" /> <br /> <InputSelect caption="Language" items={languages} /> </Fragment> ) function InputSelect ({ valueKey = 'value', captionKey = 'caption', ...props }) { return ( <label className="form__element"> {props.caption} <select className="input-select"> {props.items.map((item) => <option key={item[valueKey]} value={item[valueKey]}>{item[captionKey]}</option>)} </select> </label> ) } ReactDOM.render(<App />, document.body)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

這是僅有的幾個選項之一，其中還包括映射items以使用正確的屬性鍵創建新數組，它可能如下所示：

 const { Fragment } = React const countries = [ {code: "IT", name: "Italy"}, {code: "US", name: "United States"}, ] const languages = [ {value: 'IT', caption: 'Italiano'}, {value: 'DE', caption: 'Tedesco'} ] const App = props => ( <Fragment> <InputSelect caption="Country" items={countries.map( ({ code, name }) => ({ value: code, caption: name }) )} /> <br /> <InputSelect caption="Language" items={languages} /> </Fragment> ) function InputSelect (props) { return ( <label className="form__element"> {props.caption} <select className="input-select"> {props.items.map((item) => <option key={item.value} value={item.value}>{item.caption}</option>)} </select> </label> ) } ReactDOM.render(<App />, document.body)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

使用Array.prototype.map()

<InputSelect
  items={
   [
    {code: "IT", name: "Italy"},
    {code: "US", name: "United States"},
   ].map(country => ({value: country.code, caption: country.name}))
  }
/>

Answer 3

您可以將映射器對象傳遞給您的 Select：

function App () {
    const apiData = [
      {code: "IT", name: "Italy"},
      {code: "US", name: "United States"},
    ]

     const mapper = {value: 'code', caption: 'name'}; 
         return(
           <InputSelect items={apiData} mapper={mapper} />
          )
   }



   const defaultMapper = {value: "value", caption: "label"}

   function InputSelect ({ items, caption, mapper = defaultMapper }) {
      const {value, caption} = mapper
      return (
        <label className="form__element">
          {caption}
          <select className="input-select">
            {items.map((item, i) => <option key={i} value={item[value]}>{item[caption]}</option>)}
          </select>
        </label>
      )
    }