如何将对象作为道具传递给 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.mapconst { 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 小时。