迹忆客 专注技术分享

使用模板文字连接 React 属性中的字符串，例如 <div className={border ${myClass}}>。 模板文字用反引号分隔，允许我们使用美元符号和花括号 ${expression} 语法嵌入变量和表达式。

import './App.css';
export default function App() {
  const myClass = 'bg-salmon';
  const num = 30;
  return (
    <div>
      <div className={`text-white ${myClass}`}>Hello world</div>
      <br />
      <div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
        Hello world
      </div>
      <h2
        style={{
          padding: `${num + num}px`,
          backgroundColor: 'lime',
        }}
      >
        Hello world
      </h2>
    </div>
  );
}

这是 CSS 的示例。

.bg-salmon {
  background-color: salmon;
}
.text-white {
  color: white;
}

我们可以使用模板文字来连接 React props 中的字符串和变量。

请注意，字符串用反引号 \`` 括起来，而不是用单引号括起来。

美元符号和花括号语法允许我们使用被评估的占位符。

<div className={`text-white ${myClass}`}>
  Hello world
</div>
<div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
  Hello world
</div>

我们将模板文字包裹在其中的花括号标记了必须计算的表达式的开头。

打开右花括号之间的代码只是 JavaScript，因此我们在模板文字中使用的任何变量或表达式都将被评估。

代码片段中的第二个示例使用三元运算符。

const color1 = 'blue';
const color2 = 'red';
const result = `${color1.length > color2.length ? color1 : color2}`;
console.log(result); // 👉️ blue

三元运算符基本上是一个 if/else 语句。 问号之前的部分被评估，如果它返回一个真值，则运算符返回冒号之前的值，否则返回冒号之后的值。

import './App.css';
export default function App() {
  return (
    <div>
      <div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
        Hello world
      </div>
    </div>
  );
}

示例中的三元运算符检查字符串 hi 的长度是否等于 2，如果是，则返回字符串 bg-salmon，否则返回空字符串。