reactJS 钩子 asx 在单击 div 时更改其样式参数

Question

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

我创建了两个变量(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 会尝试渲染它。但是，您可以在分配样式 prop 本身时执行此操作，其中放置了您的三元表达式(因为 {} 中的代码被评估为普通 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>