使用 CSS 類反應標簽式系統

Question

我有 5 個 div 和 5 個按鈕。 在每個按鈕上單擊一個 div 變得可見。 其他四個被隱藏起來。 我只想問有沒有其他更好的方法來做到這一點。 盡量給點建議。 謝謝！

let id1 = React.createRef()
  let id2 = React.createRef()
  let id3 = React.createRef()
  let id4 = React.createRef()
  let id5 = React.createRef()

  function iid1() {
    id1.current.classList.remove('hidden')
    id1.current.classList.add('contents')
    id2.current.classList.add('hidden')
    id3.current.classList.add('hidden')
    id4.current.classList.add('hidden')
    id5.current.classList.add('hidden')
  }
  function iid2() {
    id1.current.classList.add('hidden')
    id2.current.classList.remove('hidden')
    id2.current.classList.add('contents')
    id3.current.classList.add('hidden')
    id4.current.classList.add('hidden')
    id5.current.classList.add('hidden')
  }
  function iid3() {
    id1.current.classList.add('hidden')
    id2.current.classList.add('hidden')
    id3.current.classList.remove('hidden')
    id3.current.classList.add('contents')
    id4.current.classList.add('hidden')
    id5.current.classList.add('hidden')
  }
  function iid4() {
    id1.current.classList.add('hidden')
    id2.current.classList.add('hidden')
    id3.current.classList.add('hidden')
    id4.current.classList.remove('hidden')
    id4.current.classList.add('contents')
    id5.current.classList.add('hidden')
  }
  function iid5() {
    id1.current.classList.add('hidden')
    id2.current.classList.add('hidden')
    id3.current.classList.add('hidden')
    id4.current.classList.add('hidden')
    id5.current.classList.remove('hidden')
    id5.current.classList.add('contents')
  }

我只是想讓上面的代碼更有效率和可讀性。 我正在尋找javascript的最佳實踐。你也可以告訴我你會解決這個問題。 我不是在尋找答案。 我是來尋求最佳實踐的，謝謝。

Answer 1

最好在 JSX 元素類中只包含 class。 就像是：

<element className={(condition_for_shown) ? 'contents' : 'hidden'}>
...
</element>

然后對於每個按鈕將是：

<button type="button" onClick={() => setStateConditonToSomething}>
...
</button>

請注意，您需要使用 useState 將條件存儲在 react useState中，或者您想要存儲它。

Answer 2

使用 state 來識別選擇的是哪個div。 按鈕將更改 state，您的應用程序將重新呈現並調整 div 的類名。

 const App = () => { const [selected,setSelected] = React.useState(0); const DIV_IDS = [0,1,2,3,4,5]; const selectItems = DIV_IDS.map((item) => { return( <button onClick={() => setSelected(item)}>{item}</button> ); }); const divItems = DIV_IDS.map((item) => { return ( <div key={item} className={selected === item? 'visible': 'hidden'}> I am div {item} </div> ); }); return( <div> <div>{selectItems}</div> <div>{divItems}</div> </div> ); }; ReactDOM.render(<App/>, document.getElementById('root'));

 .hidden { visibility: hidden; }.visible { visibility: visible; }

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

Answer 3

我會這樣做的方式是 -

const DivHidingComponent = ({ elementCount = 5 }) => { // element count defaults to 5
    const [visibilityIndex, setVisibilityIndex] = useState(0);

    const onClickCallback = useCallback((index) => () => {
      setVisibilityIndex(index);
    })
     
    const buttonGroup = useMemo(() => {
        const buttonGroup = [];
        for (let i = 0; i < elementCount; i++) {
           buttonGroup.push(
                <button key={`${i}-button`} onClick={onClickCallback(i)} />
           )
        }
        return buttonGroup;
    },  [elementCount])

    // only re-runs on a button click
    const divGroup = useMemo(() => {
        const divGroup = [];
        for (let i = 0; i < elementCount; i++) {
           divGroup.push(
                <div key={`${i}-div`} style={{ visibility: visibilityIndex === i ? 'visible' : 'hidden'  }} />
           );
        }
        return divGroup;
    },  [visibilityIndex]);

    
    return (
        <div>
          <div>
             {buttonGroup}
          </div>
          <div>
             {divGroup}
          </div>
        </div>
   );
}

我直接在 div 組循環中設置樣式，但您可以指定一個 class 名稱或 go 以根據需要設置樣式。

Div 的可見性由被單擊的按鈕驅動的可見性索引設置。

我在道具中傳遞了 elementCount 變量，因此您可以將其縮放到您想要的任意數量的元素。 5 或 1000。我為 elementCount 分配了一個值 5，當組件初始化時沒有傳遞任何值時，它將作為默認值。

此外，您可以刪除 useMemo 和 useCallback 掛鈎，它仍然可以正常執行。 但是，如果您說將元素數設置為 10,000，這將有助於提高性能。 有了這些掛鈎，它只會在重新渲染時重新構建 div 組。 這就是運行循環 20k 次（按鈕 10k，div 10k）之間的區別。

我添加了最后一段，以防你不知道 React Hooks！

我希望這有幫助！