首頁猿問有沒有辦法在 React...

有沒有辦法在 React 中創建動態狀態和 setState

JavaScript

子衿沉夜 2023-08-18 14:19:32

我有以下減速： const [open1, setOpen1] = useState(false);并希望生成與從數據庫中獲取記錄一樣多的記錄（對于獲取的每條記錄）我需要 new [open, setopen]這是我的代碼中使用的 for 循環。 <Container fluid={true} className="text-center"> <div className="questionrectangle " onClick={() => setOpen1(!open1)} name="step-one" aria-controls="example-collapse-text" aria-expanded={open1}> <p className="questiontext "> {post.QString}</p> </div> <Collapse in={open1} name="step-two"> <p className="questionanswer">{post.Answer}</p> </Collapse> </Container> ```If you have any idea I would be appreciated

查看完整描述

2 回答

紫衣仙女

TA貢獻1839條經驗獲得超15個贊

創建單獨的組件來保持“打開”狀態。像這樣的東西..

function QuestionAnswer({post}) {

const [open1, setOpen1] = useState(true);

return (

<div

className="questionrectangle "

onClick={() => setOpen1(!open1)}

name="step-one"

aria-controls="example-collapse-text"

aria-expanded={open1}

<p className="questiontext "> {post.QString}</p>

</div>

{open1 && (

<p className="questionanswer">{post.Answer}</p>

</div>

)}

</>

);

}

現在，從您的主應用程序中獲取數據并為每個帖子創建一個組件 - 就像這樣

// Replace this with fetch request

const data = [

{ QString: "Question 1", Answer: "answer 1" },

{ QString: "Question 2", Answer: "answer 2" },

{ QString: "Question 3", Answer: "answer 3" }

];

return (

{data.map((post) => (

))}

</Container>

);

}

現在，每個組件將保存自己的“打開”狀態副本，并且能夠處理單獨的打開和關閉狀態。

您可以查看完整的示例

https://codesandbox.io/s/beautiful-surf-ejron

反對回復 2023-08-18

慕標琳琳

TA貢獻1830條經驗獲得超9個贊

思考這個問題的技巧是，每個子元素（您的 <Containers /> 列表）不應該負責了解它們的兄弟元素，或者如何負責任地管理它們之間的打開狀態而不引起沖突。這種責任應該更高一個層次，能夠看到所有的孩子并為他們管理。

應該很容易采用該手風琴示例供您自己使用。

const DocsManager = () => {

// Manage which step is open here, at a higher level

const [openIndex, setOpenIndex] = useState(0); // or whatever the default should be

// Records could live here, or be passed in as props

const [docs, setDocs] = useState([]);

useEffect(() => {

getDocs.then(setDocs);

}, [])

return docs.map((doc, i) =>

<YourComponent

isOpen={openIndex === i}

// Or maybe

open={() => setOpenIndex(i)}

// Or maybe

close={() => setOpenIndex(null)}

// Or maybe

next={() => setOpenIndex(openIndex + 1)}

doc={doc}

);

};

反對回復 2023-08-18

2 回答
0 關注
149 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

有沒有辦法在 React 中創建動態狀態和 setState

有沒有辦法在 React 中創建動態狀態和 setState

2 回答

添加回答