ReactJS-如何区分要显示的select属性中的哪个选项？

如何解决ReactJS-如何区分要显示的select属性中的哪个选项？

所以我有两个数组：

const devices = [{
  deviceName: 'Pierwszy',deviceid: 10
},{
  deviceName: 'Drugi',deviceid: 20
},{
  deviceName: 'Trzeci',deviceid: 30
},{
  deviceName: 'Czwarty',deviceid: 40
},{
  deviceName: 'Piaty',deviceid: 50
}];

const wires = [{
  wireName: 'First',wireId: 10,wireLength: 50,},{
  wireName: 'Second',wireId: 20,wireLength: 4,{
  wireName: 'Third',wireId: 30,wireLength: 87,{
  wireName: 'Fourth',wireId: 40,wireLength: 5,{
  wireName: 'Fifth',wireId: 50,wireLength: 1
},];

我已经创建了CustomSelect组件来显示传递值的选项。

import React from 'react';

class CustomSelect extends React.Component {

  state = {
    optionList: []
  }

  componentDidMount() {
    this.setState({
      optionList: this.props.optionList
    })
  }

  selectMenuOptions = () => {
    return (
      this.state.optionList.map((option,i) => {
        return (
          <option
            key={i}
            value={(option.wireName || option.wireLength) || option.deviceName}
          >
            {option.wireName || option.deviceName || option.wireLength}
          </option>
        )
      })
    )
  }

  render() {
    return (
      <select
        name={this.props.name}
        value={this.props.value}
        onChange={this.props.onChange}
        id={this.props.id}
      >
        {this.selectMenuOptions()}
      </select>
    );
  }
}

export default CustomSelect;

现在，在我的App.js组件中，我遍历两个数组以在屏幕上显示值，对于每个对象数组，我想要3 select-对于device，我想选择其他名称-因此基本上要更改其名称，例如，wire我还要更改其名称，也要更改wireLength。我的问题是，在CustomSelect属性的option组件中，如何设置value以显示要显示的数据？

[编辑] 仅更改名称是可行的，现在我想添加一种方法来更改wireLength。

解决方法

我的问题是，在选项属性的CustomSelect组件中，如何设置值以显示要显示的数据？

您可以将属性名称作为属性传递给CustomSelect，然后在设置值时使用它：

value={option[this.props.valueProp]}

因此，如果您有<CustomSelect ... valueProp="wire" />，它将使用option.wire。如果您有<CustomSelect ... valueProp="wireLength" />，则将使用option.wireLength。