首頁(yè) 猿問(wèn) 如何將對(duì)象作為道具傳遞給...

如何將對(duì)象作為道具傳遞給 React.js 中的子功能組件？

JavaScript

精慕HU 2023-05-25 15:56:36

我有這個(gè)代碼和一個(gè)配置文件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。

查看完整描述

2 回答

Helenr

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超4個(gè)贊

您的代碼中的問(wèn)題是當(dāng)您執(zhí)行以下操作時(shí)，將在組件中<Select {...this.state.testType}/>接收到的數(shù)據(jù)。所以基本上數(shù)組在組件中被轉(zhuǎn)換為以下格式。propSelectSelect

{

? "0": {

? ? "value": "test1",

? ? "name": "Test1"

? },

? "1": {

? ? "value": "test2",

? ? "name": "Test2"

? }

}

因此，如果它被傳遞，而不是那樣傳播它，那么傳遞的數(shù)組可以在組件list={[...this.state.testType]}中訪問(wèn)，或者在組件本身中，它可以像. 傳遞的可以循環(huán)使用，然后呈現(xiàn)所有選項(xiàng)。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]} />

? ? ? </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"));

反對(duì) 回復(fù) 2023-05-25

泛舟湖上清波郎朗

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超3個(gè)贊

我剛剛仔細(xì)閱讀了您的描述。您通過(guò) props 傳遞的數(shù)據(jù)是一個(gè)對(duì)象數(shù)組。所以在 selectoption 組件中，“prop”是一個(gè)對(duì)象數(shù)組。您找不到此道具的“價(jià)值”和“名稱”。您必須映射此數(shù)組以獲取每個(gè)選項(xiàng)的數(shù)據(jù)。

或者您可以像這樣更改代碼。

<選擇{...this.state.testType[0]}/>

<選擇{...this.state.testType[1]}/>

反對(duì) 回復(fù) 2023-05-25

慕哥9229398

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超6個(gè)贊

感謝您的投票。我是一名敬業(yè)且可靠的全棧開發(fā)人員，在 Web 開發(fā)方面擁有超過(guò) 10 年的經(jīng)驗(yàn)。我在使用 Node.js 和 Laravel 的 RESTful API 進(jìn)行 React、Vue、Angular 前端開發(fā)和后端開發(fā)方面擁有豐富的技能和經(jīng)驗(yàn)。我可以用我強(qiáng)大的開發(fā)技能幫助你。您會(huì)對(duì)我的代碼質(zhì)量和快速交付感到滿意。我有全職工作時(shí)間，我可以在您所在的時(shí)區(qū)每天至少重疊 8 小時(shí)。

反對(duì) 回復(fù) 2023-05-25