将 useState 反应到 return 具有两种不同条件的假图像

Question

当两个按钮为 false 时，它们 return 相同的图像，但它们彼此相邻，如何在不插入另一张图像的情况下使两种状态下的 test3 图像相等？

 const [b1State, setB1State] = useState(false);
 const [b2State, setB2State] = useState(false);

<button onClick={() => {setB1State(!b1State)}}>Test1</button>
<button onClick={() => {setB2State(!b2State)}}>Test2</button>

{b1State ? <img src={test1} alt="" /> : <img src={test3} alt="" />}
{b2State ? <img src={test2} alt="" /> : <img src={test3} alt="" />}

问题是当两个按钮都为真时，一张图片在上面，一张在下面，我相信当一个为真时，另一个应该为假。

Answer 1

您可以使用 Set 来确保图像 src 包含一次。创建 Set 后，将其散布回数组，并使用 Array.map():

进行渲染

const { useState, useMemo } = React

const test1 = 'https://picsum.photos/id/237/100'
const test2 = 'https://picsum.photos/id/1003/100'
const test3 = 'https://picsum.photos/id/1024/100'

const Demo = () => {
  const [b1State, setB1State] = useState(false);
  const [b2State, setB2State] = useState(false);

  // create the unique array of images using a Set
  const images = useMemo(() => [...new Set([
    b1State ? test1 : test3,
    b2State ? test2 : test3,
  ])], [b1State, b2State])

  return ( 
    <div>
    <button onClick={() => {setB1State(!b1State)}}>Test1</button>
    <button onClick={() => {setB2State(!b2State)}}>Test2</button>
    
    <br />
      {images.map(src => ( // render the array
        <img key={src} src={src} alt="" />
      ))}
    </div>
  )
}

ReactDOM.render(
  <Demo />,
  root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

Answer 2

您可以将此条件渲染单独用于 img3

{(!b1State && !b2State) && <div>show img3</div>}
{b1State && <div>show img1</div>}
{b2State && <div>show img2</div>}

Answer 3

2 个按钮状态有 4 种可能的组合（0 0、0 1、1 0、1 1）- 因此您需要检查所有组合。

当两者都打开时显示哪个按钮图像？ - 您需要创建一个新的状态变量来存储上次单击的按钮。

/* These constants contains image url */
const test1 = "full length apron";
const test2 = "waist apron";
const test3 = "naked";

const [b1State, setB1State] = useState(false);
const [b2State, setB2State] = useState(false);
// last clicked option will be displayed when both of them are "true" - so created a new state
const [lastClicked, setLastClicked] = useState(test1);

return(
    <>
        <button onClick={() => {setB1State(!b1State); setLastClicked(test1)}}>Test1</button>
        <button onClick={() => {setB2State(!b2State); setLastClicked(test2)}}>Test2</button>

        {/* when both the button are off - naked guy image appears */}
        { (!b2State && !b1State) && <img src={test3} alt={test3} /> }

        {/* when button 1 is on and 2 is off - full length apron image appears */}
        { (b1State && !b2State) && <img src={test1} alt={test1} /> }

        {/* when button 2 is on and 1 is off - waist apron image appears */}
        { (b2State && !b1State) && <img src={test2} alt={test2} /> }

        {/* when both the buttons are on - last button click image appears */}
        { (b1State && b2State) && <img src={lastClicked} alt={lastClicked} /> }
    </>
);

将 useState 反应到 return 具有两种不同条件的假图像

React useState to return a fake image with two different conditions

buttonclick

reactjs

react-hooks

react-functional-component

use-state