React 道具中的字符串连接

作者

React 道具中的字符串连接

String concatenation in React props

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

应用程序.js
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。

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

.text-white {
  color: white;
}

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

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

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

应用程序.js
<div className={`text-white ${myClass}`}>
  Hello world
</div>

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

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

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

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

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

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

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

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

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

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

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

–

发表评论