NextJS:替换

Question

我在下一个JS应用程序中有一个div，该应用程序在用户输入产品页面后显示产品的货币和价格。

<div className="flex">

<Image src={EuroCurrency} alt="Euro Sign} />
<h1 className="ml-5>9.800,00</h1>

</div>

通过按钮上的onClick事件，我希望将这个div与另一个格式均匀但上下文不同的div交换。

<div>

<Image src={DollarCurrency} alt="Dollar Sign} />

<h1 className="ml-5>9,500.00</h1>

</div>

在用户单击上述按钮之前，需要隐藏此div。

我知道这将通过一个国家来实现，但我不确定如何隐藏(和交换)一个完整的div。

Answer 1

这就是如何将条件呈现和useState一起用于切换组件。

import React from 'react'
export default function App() {
  const [toggle, setToggle] = React.useState(false);
  
  return (
    <div className="App">
      {toggle ? ( <div >
      <h1 >9.800,00</h1>
      </div>): (<div><h1>9,500.00</h1></div>)
      }
      <button onClick={()=>{setToggle(!toggle)}}>Toogle</button>
    </div>
  );
}

在这里，您需要更改适合您的条件呈现。

{toggle ? ( COMPONENT 1 ): ( COMPONENT 2 )}

Answer 2

我对你的要求做了一些猜测，但希望这个例子能有所帮助。

这是一个使用状态在呈现欧元和美元组件之间切换的功能组件的示例：

import { useState } from 'react';

function MyAwesomeComponent(){ 

// expected state values are "dollar" or "euro"
// if you use TypeScript, you can enforce that,
// but I'm just a TypeScript shill :P

// "dollar" is the initial state
const [currency, setCurrency] = useState("dollar");

return(
  <div className="flex">

     { currency === "dollar" 
       ? <Image src={DollarCurrency} alt="Dollar Sign" />
       : <Image src={EuroCurrency} alt="Euro Sign" />
     }
    
     <h1 className="ml-5">9.800,00</h1>

     <button onClick={
         () => currency === "dollar" ? setCurrency("euro") : setCurrency("dollar")
       }
     > 
       Click to Switch Currency
     </button>

  </div>
)
}

做这件事还有很多其他的方法。但是请注意，我只是有条件地呈现特定的Image组件，而不是有条件地呈现整个div和复制代码。根据您的用例，您可以有条件地呈现div，任何组件都可以进入terney表达式的两个槽。