ReactJS如何使用行内if-else语句？代码逻辑及三元运算符替代方案疑问

1. clk函数、h1标签与三元运算符的关联 #

• clk是绑定在按钮onClick属性上的点击事件处理函数，点击按钮后会触发执行，调用状态更新方法setRed把状态变量isRed的值修改为true
• h1标签的className属性通过三元运算符isRed?"red":""和isRed状态绑定：当isRed为true时给h1添加red类名，为false时类名留空
• 完整的联动逻辑链路：点击按钮 → 触发clk函数执行 → isRed状态更新 → 组件自动重新渲染 → h1的类名根据最新的isRed值动态更新

2. 用if-else替代三元运算符，同步修改类名和style #

你代码中用到的三元运算符本质就是if-else二分支逻辑的简写形式，仅适合做简单值返回。如果要同时处理类名、样式等多个逻辑，可以在return渲染模板之前，提前通过if-else计算好对应的值，再绑定到元素上即可，示例代码如下：

import React, {useState} from 'react';
import "./App.css";

function App(){
  let [isRed,setRed] = useState(false);
  function clk(){
    setRed(!isRed); // 这里修改为取反可以实现点击切换效果，你也可以保留原来的setRed(true)
  }

  // 提前通过if-else计算h1的类名和样式
  let h1ClassName = "";
  let h1Style = {};
  if(isRed) {
    h1ClassName = "red";
    // 自定义需要同步修改的样式
    h1Style = {
      fontSize: "28px",
      fontWeight: 700,
      borderBottom: "1px solid red"
    }
  } else {
    h1ClassName = "";
    h1Style = {
      fontSize: "16px",
      fontWeight: 400,
      borderBottom: "none"
    }
  }

  return(
        <div>
           <h1 className={h1ClassName} style={h1Style}>Change My Color</h1>
           <button onClick={clk}>ClickHere</button>
        </div>
  );
}
export default App;

如果你想直接在JSX模板中写if-else，可以使用立即执行函数包裹逻辑：

<h1 
  className={
    (() => {
      if(isRed) return "red"
      else return ""
    })()
  }
  style={
    (() => {
      if(isRed) return {fontSize: "28px", color: "red"}
      else return {fontSize: "16px"}
    })()
  }
>
  Change My Color
</h1>

内容的提问来源于stack exchange，提问作者JSXStarter