在 React 中连接字符串和变量

作者

在 React 中连接字符串和变量

Concatenate strings and variables in React

在 React 中使用模板文字来连接字符串和变量，例如“<a href={ https://example.com/${myPath}}”。模板文字用反引号分隔，并允许我们使用美元符号和花括号${expression}语法嵌入变量和表达式。

应用程序.js
import './App.css';

export default function App() {
  const myClass = 'bg-salmon';
  const num = 30;
  const myPath = '/example/123';

  const path = 'example';
  const id = '123';
  const url = `https://example.com/${path}/${id}`;
  console.log(url); // 👉️ "https://example.com/example/123"

  return (
    <div>
      <a
        href={`https://example.com/${myPath}`}
        target="_blank"
        rel="noreferrer"
      >
        Example
      </a>

      <div className={`text-white ${myClass}`}>Apple</div>

      <br />

      <div className={`some-class ${'hi'.length === 2 ? 'bg-yellow' : ''}`}>
        Banana
      </div>

      <h2
        style={{
          padding: `${num + num}px`,
          backgroundColor: 'lime',
        }}
      >
        Kiwi
      </h2>
    </div>
  );
}

这是示例的 CSS。

应用程序.css
.bg-salmon {
  background-color: salmon;
}

.bg-yellow {
  background-color: yellow;
}

.text-white {
  color: white;
}

反应连接字符串和变量

我们使用
模板文字
在 React 中连接字符串和变量。

请注意，字符串包含在反引号 “ 中，而不是单引号中。

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

应用程序.js
<a
  href={`https://example.com/${myPath}`}
  target="_blank"
  rel="noreferrer"
>
  Example
</a>

<div className={`text-white ${myClass}`}>Apple</div>

<br />

<div className={`some-class ${'hi'.length === 2 ? 'bg-yellow' : ''}`}>
  Banana
</div>

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

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

您还可以在 JSX 代码之外使用模板文字。

应用程序.js
const path = 'example';
const id = '123';
const url = `https://example.com/${path}/${id}`;

// 👇️ "https://example.com/example/123"
console.log(url);

默认情况下，模板文字将各个部分连接成一个字符串。

如果您需要有条件地连接字符串和变量，

请在模板文字中使用三元运算符。

应用程序.js
const color1 = 'blue';
const color2 = 'red';

const result = `${color1.length > color2.length ? color1 : color2}`;

console.log(result); // 👉️ blue

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

应用程序.js
<div className={`some-class ${'hi'.length === 2 ? 'bg-yellow' : ''}`}>
  Banana
</div>

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

–

发表评论