亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將對象作為道具傳遞給 React.js 中的子功能組件?

如何將對象作為道具傳遞給 React.js 中的子功能組件?

精慕HU 2023-05-25 15:56:36
我有這個代碼和一個配置文件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貢獻1780條經驗 獲得超4個贊

您的代碼中的問題是當您執行以下操作時,將在組件中<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>



查看完整回答
反對 回復 2023-05-25
?
泛舟湖上清波郎朗

TA貢獻1818條經驗 獲得超3個贊

我剛剛仔細閱讀了您的描述。您通過 props 傳遞的數據是一個對象數組。所以在 selectoption 組件中,“prop”是一個對象數組。您找不到此道具的“價值”和“名稱”。您必須映射此數組以獲取每個選項的數據。

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

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

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


查看完整回答
反對 回復 2023-05-25
?
慕哥9229398

TA貢獻1877條經驗 獲得超6個贊

感謝您的投票。我是一名敬業且可靠的全棧開發人員,在 Web 開發方面擁有超過 10 年的經驗。我在使用 Node.js 和 Laravel 的 RESTful API 進行 React、Vue、Angular 前端開發和后端開發方面擁有豐富的技能和經驗。我可以用我強大的開發技能幫助你。您會對我的代碼質量和快速交付感到滿意。我有全職工作時間,我可以在您所在的時區每天至少重疊 8 小時。



查看完整回答
反對 回復 2023-05-25
  • 2 回答
  • 0 關注
  • 172 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號