reactJS hooks asx 在单击时更改 div 的样式参数

Question

我有几个具有唯一 ID 并共享相同类名的元素。当用户单击其中一个元素时，我想更改背景和文本颜色以及字体。

我创建了两个变量（Style1、Style2）来保存普通元素和点击元素的样式。 Style1 用于被点击的元素。

const tileStyle1: CSS.Properties = {
    backgroundColor: 'blue',
    fontFamily: 'londrinaBlackRegular',
    color: 'yellow',
  };  

  const tileStyle2: CSS.Properties = {
    fontFamily: 'londrinaSketcheRegular'}; 

我为所有元素创建了第三个变量 tileStyle，它嵌入在 HTML 中。示例：

<div className="linkcontainer" ID="Tile3" style={tileStyle} onClick={handleClick}>Marketing</div>

<div className="linkcontainer" ID="Tile4" style={tileStyle} onClick={handleClick}>Support</div>

我想用三元运算符为每个元素设置 tileStyle：

{clickedTile = "Tile3" ? tileStyle = tileStyle1 : tileStyle = tileStyle2;}
<div className="linkcontainer" ID="Tile3" style={tileStyle} onClick={handleClick}>Support</div>

{clickedTile = "Tile4" ? tileStyle = tileStyle1 : tileStyle = tileStyle2;}

<div className="linkcontainer" ID="Tile4" style={tileStyle} onClick={handleClick}>Support</div>

但看起来这些不是通常方式的对象，这会产生一个很大的错误：对象作为 React 子级无效（找到：带键的对象{fontFamily}）...

Answer 1

你不能在 return 方法中进行变量赋值，因为 React 会尝试渲染它。但是，您可以在分配样式道具本身时这样做，您将您的三元表达式放在其中（因为 {} 内的代码被评估为普通的 JS 表达式），您返回字典。

<div className="linkcontainer" ID="Tile3" style={clickedTile === "Tile3" ? tileStyle1 : tileStyle2} onClick={handleClick}>Support</div>

<div className="linkcontainer" ID="Tile4" style={clickedTile === "Tile4" ? tileStyle1 : tileStyle2} onClick={handleClick}>Support</div>