第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

有沒有辦法在 React 中創(chuàng)建動(dòng)態(tài)狀態(tài)和 setState

有沒有辦法在 React 中創(chuàng)建動(dòng)態(tài)狀態(tài)和 setState

子衿沉夜 2023-08-18 14:19:32
我有以下減速:   const [open1, setOpen1] = useState(false);并希望生成與從數(shù)據(jù)庫中獲取記錄一樣多的記錄(對(duì)于獲取的每條記錄)我需要 new [open, setopen]這是我的代碼中使用的 for 循環(huán)。        <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貢獻(xiàn)1839條經(jīng)驗(yàn) 獲得超15個(gè)贊

創(chuàng)建單獨(dú)的組件來保持“打開”狀態(tài)。像這樣的東西..


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 && (

        <div name="step-two">

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

        </div>

      )}

    </>

  );

}

現(xiàn)在,從您的主應(yīng)用程序中獲取數(shù)據(jù)并為每個(gè)帖子創(chuàng)建一個(gè)組件 - 就像這樣


  // 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 (

    <Container fluid={true} className="text-center">

      {data.map((post) => (

        <QuestionAnswer post={post} />

      ))}

    </Container>

  );

}

現(xiàn)在,每個(gè)組件將保存自己的“打開”狀態(tài)副本,并且能夠處理單獨(dú)的打開和關(guān)閉狀態(tài)。


您可以查看完整的示例


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


查看完整回答
反對(duì) 回復(fù) 2023-08-18
?
慕標(biāo)琳琳

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

思考這個(gè)問題的技巧是,每個(gè)子元素(您的 <Containers /> 列表)不應(yīng)該負(fù)責(zé)了解它們的兄弟元素,或者如何負(fù)責(zé)任地管理它們之間的打開狀態(tài)而不引起沖突。這種責(zé)任應(yīng)該更高一個(gè)層次,能夠看到所有的孩子并為他們管理。


應(yīng)該很容易采用該手風(fēng)琴示例供您自己使用。


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}

    />

  );

};


查看完整回答
反對(duì) 回復(fù) 2023-08-18
  • 2 回答
  • 0 關(guān)注
  • 156 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)