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

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

在 React 中使用 useState 映射外部數(shù)組后,如何顯示/隱藏嵌套數(shù)組元素/組件?

在 React 中使用 useState 映射外部數(shù)組后,如何顯示/隱藏嵌套數(shù)組元素/組件?

SMILET 2023-11-11 20:55:13
最初目標(biāo):我有 4 個(gè)組件,當(dāng)單擊其中一個(gè)組件時(shí),其他三個(gè)組件消失,僅顯示被單擊的組件。再次單擊該組件可將所有組件切換為再次顯示。我的目標(biāo)是向數(shù)組中的每個(gè)組件添加一個(gè)信息/描述對(duì)象,以便在切換組件時(shí),其他組件仍然消失,但現(xiàn)在根據(jù)切換的組件顯示描述。我的思考過程是為描述元素設(shè)置一個(gè)可見性標(biāo)志,將其設(shè)置為 false,然后切換特定組件會(huì)將標(biāo)志更改為 true 并顯示描述。這是我目前的看法:const array = [    { id: 1, component: <Comp1/>, isVisible: true,       info: [{ id: 5, component: <div>info1</div>, isVisibleInfo: false }] },    { id: 2, component: <Comp2/>, isVisible: true,       info: [{ id: 6, component: <div>info2</div>, isVisibleInfo: false }] },    { id: 3, component: <Comp3/>, isVisible: true,       info: [{ id: 7, component: <div>info3</div>, isVisibleInfo: false }] },    { id: 4, component: <Comp4/>, isVisible: true,       info: [{ id: 8, component: <div>info4</div>, isVisibleInfo: false }] }  ];    export const Test = () => {    const [items, setItems] = useState(array);      const handleClick = (number) => {      const triggeredItems = items.map((item) => {        if (item.id !== number) {          item.isVisible = !item.isVisible;        }          return item;      });        setItems(triggeredItems);    };    const handleClickInner = (number) => {      const triggeredItemsInner = items.info.map((item) => {        if (item.id !== number) {          item.isVisibleInfo = !item.isVisibleInfo;        }          return item;      });        setItems(triggeredItemsInner);    };      return (      <div className="mt-1 pt-1 pb-3 px-3">        <div className="row text-center d-flex my-1">        {items.map(({ id, component, isVisible, info }) => (          <div            key={id}            className="col-lg-3 col-md-6 mb-4 justify-content-center"            onClick={() => handleClick(id)}            hidden={!isVisible}          >            { component }            {info.map(({ id, component, isVisibleInfo }) => (            <div              key={id}目前,我得到此輸出 TypeError: Cannot read property 'map' of undefined in the 'handleClickInner function 因?yàn)槲蚁嘈?map 無法映射嵌套數(shù)組,但總的來說,我不確定創(chuàng)建第二個(gè)函數(shù)是否是正確的方法甚至。仍在學(xué)習(xí)很多關(guān)于 React 及其方法的知識(shí)!任何想法或幫助將不勝感激!
查看完整描述

1 回答

?
繁星coding

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

我的目標(biāo)是向數(shù)組中的每個(gè)組件添加一個(gè)信息/描述對(duì)象,以便在切換組件時(shí),其他組件仍然消失,但現(xiàn)在根據(jù)切換的組件顯示描述。


你不是真的想消失吧?聽起來更像是您想要有條件地渲染組件。


更新


我誤解了你的意圖!現(xiàn)在他們消失了。


// hooks

const {useState} = React;


function Comp1(){

  return <div><p>Component 1</p></div>

}

function Comp2(){

  return <div><p>Component 2</p></div>

}

function Comp3(){

  return <div><p>Component 3</p></div>

}

function Comp4(){

  return <div><p>Component 4</p></div>

}


const array = [

    { id: 1, component: <Comp1/>, isVisible: true, 

      info: { id: 5, component: <div>info1</div>, isVisibleInfo: false } },


    { id: 2, component: <Comp2/>, isVisible: true, 

      info: { id: 6, component: <div>info2</div>, isVisibleInfo: false } },


    { id: 3, component: <Comp3/>, isVisible: true, 

      info: { id: 7, component: <div>info3</div>, isVisibleInfo: false } },


    { id: 4, component: <Comp4/>, isVisible: true, 

      info: { id: 8, component: <div>info4</div>, isVisibleInfo: false } }

  ];


const Test = () => {


    const [items, setItems] = useState(array);

  

    const handleClick = (number) => {

      

      const triggeredItems = items.map((item) => {

        if (item.id !== number) {

          item.isVisible = !item.isVisible;

        }

        item.info.isVisibleInfo =! item.info.isVisibleInfo

  

        return item;

      });

  

      setItems(triggeredItems);

    };


  

    return (

      <div className="mt-1 pt-1 pb-3 px-3">

        <div className="row text-center d-flex my-1">

        {items.map(({ id, component, isVisible, info }) => (

          isVisible ? 

          <div

            key={id}

            className="col-lg-3 col-md-6 mb-4 justify-content-center"

            onClick={() => handleClick(id)}

            hidden={!isVisible}

          >

            { component }

          {info.isVisibleInfo ? 

          <div

              key={info.id}

              className="col-lg-9 col-md-6 mb-4 justify-content-center"

            >

              { info.component }

              

            </div>

            : null}

          </div>

          : null

        ))}

        </div>

      </div>

    );

  };



function App(){

  return (

    <div>

      <Test />

    </div>

  );

};


// Render

ReactDOM.render(

  <App />,

  document.getElementById("react")

);

<div id="react"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>



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

添加回答

舉報(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)