在地圖函式問題中反應條件樣式

我只想顯示切換專案。但是所有的地圖專案都出現了。基本上這是我從 onclick 得到的結果。我想我需要為每個專案提供索引或 ID，但我不知道該怎么做。我給每個問題都提供了 id 沒有用。

應用程式.js。

import "./App.css";
import React, { useState, useEffect } from "react";
import bg from "./images/bg-pattern-desktop.svg";
import bg1 from "./images/illustration-box-desktop.svg";
import bg2 from "./images/illustration-woman-online-desktop.svg";
import { data } from "./data";
import Faq from "./Faq";

function App() {
  const [db, setDb] = useState(data);
  const [toggle, setToggle] = useState(false);
  useEffect(() => {
    console.log(db);
  }, []);

  return (
    <>
      <div className="container">
        <div className="container-md">
          <div className="faq">
            <img src={bg} className="bg" />
            <img src={bg1} className="bg1" />
            <img src={bg2} className="bg2" />
            <div className="card">
              <h1>FAQ</h1>
              <div className="info">
                {db.map((dat) => (
                  <Faq
                    toggle={toggle}
                    setToggle={setToggle}
                    title={dat.title}
                    desc={dat.desc}
                    key={dat.id}
                    id={dat.id}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

常見問題解答.js

import React from "react";
import arrow from "./images/icon-arrow-down.svg";

const Faq = ({ toggle, setToggle, title, desc, id }) => {
  return (
    <>
      {" "}
      <div className="question" onClick={() => setToggle(!toggle)}>
        <p>{title}</p>

        <img src={arrow} className={toggle ? "ikon aktif" : "ikon"} />
      </div>
      <p className="answer border">{toggle ? <>{desc}</> : ""}</p>
    </>
  );
};

export default Faq;

uj5u.com熱心網友回復：

您需要存盤切換項的索引值。您可以使用現有代碼庫僅用 2 行代碼修改代碼。

import "./App.css";
import React, { useState, useEffect } from "react";
import bg from "./images/bg-pattern-desktop.svg";
import bg1 from "./images/illustration-box-desktop.svg";
import bg2 from "./images/illustration-woman-online-desktop.svg";
import { data } from "./data";
import Faq from "./Faq";

function App() {
  const [db, setDb] = useState(data);
  const [toggle, setToggle] = useState(-1); //Modify Here
  useEffect(() => {
    console.log(db);
  }, []);

  return (
    <>
      <div className="container">
        <div className="container-md">
          <div className="faq">
            <img src={bg} className="bg" />
            <img src={bg1} className="bg1" />
            <img src={bg2} className="bg2" />
            <div className="card">
              <h1>FAQ</h1>
              <div className="info">
                {db.map((dat, index) => ( //Modify Here
                  <Faq
                    toggle={index === toggle} //Modify Here
                    setToggle={() => setToggle(index)} //Modify Here
                    title={dat.title}
                    desc={dat.desc}
                    key={dat.id}
                    id={dat.id}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;



import React from "react";
import arrow from "./images/icon-arrow-down.svg";

const Faq = ({ toggle, setToggle, title, desc, id }) => {
  return (
    <>
      {" "}
      <div className="question" onClick={setToggle}>
        <p>{title}</p>

        <img src={arrow} className={toggle ? "ikon aktif" : "ikon"} />
      </div>
      <p className="answer border">{toggle ? <>{desc}</> : ""}</p>
    </>
  );
};

export default Faq;

uj5u.com熱心網友回復：

您將需要每個切換的狀態。這是一個最小的可驗證示例。Run下面的代碼，然后單擊??以打開專案。單擊?以關閉它。

function App({ faq = [] }) {
  const [toggles, setToggles] = React.useState({})
  const getToggle = key =>
    Boolean(toggles[key])
  const setToggle = key => event =>
    setToggles({...toggles, [key]: !getToggle(key) })
  return faq.map((props, key) =>
    <Faq key={key} {...props} open={getToggle(key)} toggle={setToggle(key)} />
  )
}

function Faq({ question, answer, open, toggle }) {
  return <div>
    <p>
      {question}
      <button onClick={toggle} children={open ? "?" : "??"} />
    </p>
    {open && <p>{answer}</p>}
  </div>
}

const faq = [
  {question: "hello", answer: "world"},
  {question: "eat", answer: "vegetables"}
]

ReactDOM.render(<App faq={faq} />, document.querySelector("#app"))

p { border: 1px solid gray; padding: 0.5rem; }
p ~ p { margin-top: -1rem; }
button { float: right; }

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

uj5u.com熱心網友回復：

而不是這樣做（在App組件中）：

 const [db, setDb] = useState(data);
 const [toggle, setToggle] = useState(false);

您可以撰寫一個如下所示的useState掛鉤來組合這兩個掛鉤并isOpened為每個常見問題元素分配一個屬性：

const [db, setDb] = useState(data.map(value=>{return {...value, isOpened:false}}));

然后在這里你可以這樣做（作為 的孩子<div className="info">）：

{db.map((dat, index) => ( 
      <Faq
        toggle={dat.isOpened} 
        setToggle={() => toggleById(dat.id)} 
        title={dat.title}
        desc={dat.desc}
        key={dat.id}
        id={dat.id}
      />
))}

您還需要在App組件中宣告toggleById函式：

const toggleById = (id) => {
   const newDb = db.map(dat=>{
       if(dat.id==id){
          return {...dat,isOpened:!dat.isOpened}
       }
       return dat;
   });
   setDb(newDb);
}

并且由于Faq的setToggle prop由其定義的引數呼叫，因此無需在Faq組件中執行此操作：toggleById

<div className="question" onClick={() => setToggle(!toggle)}>

你可以簡單地寫：

<div className="question" onClick={setToggle}>

標籤：javascript 反应 if 语句 反应钩子

上一篇：條件（三元）運算子直接轉到else選項

下一篇：如果陳述句與。while回圈