如何识别同一个父组件渲染的同类型的每个子组件

Question

我对 React 很陌生，我不知道如何区分相同类型的 2 个不同的子组件。

就我而言，我正在尝试构建一个应用程序，允许比较 2 种不同车型在过去 5 年中的价格。

我有 2 个 SelecComponent，在数据库中有汽车制造商作为选项，还有 2 个 SelecComponent，我需要在数据库中为每个选定的汽车制造商列出可用的汽车型号，所以前 2 个 SC 中的每一个应该只控制存储有汽车模型的 2 个 SC 之一。

通常我会通过不同的 ID 识别 SelecComponent 并使用 jQuery 来操作它们，但是在 React 中最好的方法是什么？

父组件：

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      carProducers: [],
      carModels: [],
      selectedProducer: null,
      selectedModel: null
    }
  }


  //function to retrieve the carmakers in order to initialize the drop down elements in the page
  componentDidMount(){
    axios.get("/AutoExposed/API/carmakers.php")
    .then(response => {
      var data = response.data
      this.setState({
        carProducers: parseCarProducers(data)
      })
    })
    .catch(error => {
      console.log(error)
    })
  }

  //function to retrieve the car models once the car producer has been selected
  carProducerSelected1 = (selectedValue) =>{
    this.setState({selectedProducer: selectedValue}, () =>{
      axios.get("/AutoExposed/API/carmodels_GET.php?carmaker=" + this.state.selectedProducer.value)
      .then(response => {
        var data = response.data
        this.setState({
          carModels: parseCarModels(data)
        }) 
      })
      .catch(error => {
        console.log(error)
      })
    })   
  }

  carModelSelected = (selectedValue) => {
    this.setState({selectedModel: selectedValue}, ()=>{
      console.log(`The car model has just been selected: `, this.state.selectedModel.value)
    })
  }

  render(){
    return (
      <div className="App">
        <div className="container">
          <div className="row">
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">
              <SelectComponent selectOptions={this.state.carProducers} onOptionSelected={this.carProducerSelected}/>
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">
              <SelectComponent selectOptions={this.state.carProducers} onOptionSelected={this.carProducerSelected}/>
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">

            </div>
          </div>

          <div className="row">
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">

            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">
            <SelectComponent selectOptions={this.state.carModels} onOptionSelected={this.carModelSelected}/>
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">
              <SelectComponent selectOptions={this.state.carModels} onOptionSelected={this.carModelSelected}/>
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">

            </div>
          </div>

          <div className="row">
            <div className="col-lg-9 col-md-9 col-sm-12 col-sm-12">
              <ChartComp />
            </div>
          </div>
        </div>





      </div>
    );
  }

}

export default App;

子组件：

类 SelectComponent 扩展组件 { 状态 = { 选定选项状态：空， }

optionWasSelected = (selectedOption) => {

    this.setState({selectedOtptionState: selectedOption}, () => {
        this.props.onOptionSelected(this.state.selectedOtptionState)
    })
}

render() {
    return (
        <Select 
            value={this.state.selectedOtptionState}
            onChange={this.optionWasSelected}
            options = {this.props.selectOptions} 
        /> 

    );
}

} 导出默认选择组件；

Answer 1

您需要在数组中取回数据，然后您需要对其进行映射，并为数组中的每个迭代（对象）给它一个组件。并在组件中传递当前迭代（将当前项目的信息传播到组件道具对象）信息并将其显示在组件中。

apiData.map(item,index)=>{ return <CarComponent {...item} key={index}/>})

现在您已将当前汽车信息的所有信息传递给道具，您可以显示这些信息

const CarComponet=props => {

      return (
          <div>

            <h1>{props.title} </h1>
              <p>{props.carMake} </p>
              <p>{props.carYear} </p>
              <p>{props.carPrice} </p>
         </div>

             )

}

Answer 2

您的设置是正确的。这里的不同之处在于思维过程的一些转变 - 使用 jQuery 之类的东西，您可以根据 ID 将事件连接到元素，然后通过事件直接更新它们，而响应您在渲染时连接事件处理程序，然后更新状态当事件被触发，然后以新状态重新渲染；

首先 - 由于您有两辆不同的汽车/生产商，您需要为每辆汽车/生产商提供状态变量来存储这两个不同的值及其模型（例如 selectedMainProducer、selectedCompareProducer、mainCarModels、compareCarModels）。此外，在这种情况下，最好有单独的事件处理程序来区分使用哪个选择并设置适当的状态：

<SelectComponent onOptionSelected={this.onMainProducerSelected} ... />
...
<SelectComponent onOptionSelected={this.onCompareProducerSelected} ... />
...

然后将两个不同的值及其模型存储在您的状态中，例如：

onMainProducerSelected = (selectedValue) => {
  this.setState({
    selectedMainProducer: selectedValue,
  },() => {
    axios.get(api + this.state.selectedMainProducer.value).then(response => {
      var data = response.data
      this.setState({
        mainCarModels: parseCarModels(data), // <-- separate models
      });
    });
  });
}

onCompareProducerSelected = (selectedValue) => {
  this.setState({
    selectedCompareProducer: selectedValue,
  },() => {
    axios.get(api + this.state.selectedCompareProducer.value).then(response => {
      var data = response.data
      this.setState({
        compareCarModels: parseCarModels(data), // <-- separate models
      });
    });
  });
}

这样，您就可以根据您的 selectedMainProducer 和 selectedCompareProducer 状态呈现您的辅助选择。

例如

<SelectComponent selectOptions={this.state.mainCarModels} ... />
...
<SelectComponent selectOptions={this.state.compareCarModels} ... />
...