如何将对象作为道具传递给 React.js 中的子功能组件？

Question

我有这个代码和一个配置文件testType：import React, { Component } from 'react';import Select from "./components/Select/Select";class App extends Component {  state = {    testType : [      {value : "test1", name : "Test1"},      {value : "test2", name : "Test2"},    ]  }    render() {        return (            <>              <Select {...this.state.testType}/>              <Select {...this.state.testType}/>            </>            );    }}export default App;我用它作为道具传递给选择组件，下面是它的代码Select.js：import React from "react";const selectoption = (props) => (<select className="custom-select">    <option value={props.value}>{props.name}</option></select>);export default selectoption;但它不起作用，我没有props在 select 元素中看到 test1 和 test2。

Answer 1

您的代码中的问题是当您执行以下操作时，将在组件中<Select {...this.state.testType}/>接收到的数据。所以基本上数组在组件中被转换为以下格式。propSelectSelect

{

  "0": {

    "value": "test1",

    "name": "Test1"

  },

  "1": {

    "value": "test2",

    "name": "Test2"

  }

}

因此，如果它被传递，而不是那样传播它，那么传递的数组可以在组件list={[...this.state.testType]}中访问，或者在组件本身中，它可以像. 传递的可以循环使用，然后呈现所有选项。Selectprops.listconst Select = ({ list }) => {...}listArray.map

const { Component, Fragment } = React;

class App extends Component {

  state = {

    testType: [

      { value: "test1", name: "Test1" },

      { value: "test2", name: "Test2" }

    ]

  };

  render() {

    return (

      <Fragment>

        <Select list={[...this.state.testType]} />

        <Select list={[...this.state.testType]} />

      </Fragment>

    );

  }

}

const Select = ({ list }) => (

  <select className="custom-select">

    {list.map(option => (

      <option key={option.value} value={option.value}>{option.name}</option>

    ))}

  </select>

);

ReactDOM.render(<App />, document.getElementById("react"));

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

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

<div id="react"></div>

Answer 2

我刚刚仔细阅读了您的描述。您通过 props 传递的数据是一个对象数组。所以在 selectoption 组件中，“prop”是一个对象数组。您找不到此道具的“价值”和“名称”。您必须映射此数组以获取每个选项的数据。

或者您可以像这样更改代码。

<选择{...this.state.testType[0]}/>

<选择{...this.state.testType[1]}/>

Answer 3

感谢您的投票。我是一名敬业且可靠的全栈开发人员，在 Web 开发方面拥有超过 10 年的经验。我在使用 Node.js 和 Laravel 的 RESTful API 进行 React、Vue、Angular 前端开发和后端开发方面拥有丰富的技能和经验。我可以用我强大的开发技能帮助你。您会对我的代码质量和快速交付感到满意。我有全职工作时间，我可以在您所在的时区每天至少重叠 8 小时。