React技巧之字符串插值

原文链接：https://bobbyhadz.com/blog/react-string-interpolation[1]

作者：Borislav Hadzhiev[2]

正文从这开始~

总览

在React中，使用模板字面量进行字符串插值，比如说，<div className={text-white`

代码语言：javascript复制

import './App.css';

export default function App() {
  const myClass = 'bg-salmon';

  const name = 'James Doe';

  const num = 30;
  return (
    <div>
      <div className={`text-white ${myClass}`}>Some content here</div>

      <br />

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

      <h2>Hello {name}</h2>

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

下面是示例中的css声明。

代码语言：javascript复制

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

.text-white {
  color: white;
}

string-interpolation.png

模板字面量

我们可以使用模板字面量在字符串中插入变量。需要注意的是，字符串是用反引号````包裹起来的，而不是用单引号。

美元符号和大括号语法允许我们使用占位符来求值。

代码语言：javascript复制

<div className={`text-white ${myClass}`}>Some content here</div>

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

我们用大括号把模板字面量包裹起来，标志着一个必须被求值的表达式的开始。

开头和结尾的大括号之间的只是JavaScript代码，所以我们在模板字面量上使用的任何变量或表达式都会被求值。

当你想在JSX代码中渲染变量或表达式时，你必须将代码包裹在大括号内。

代码语言：javascript复制

<h2>Hello {name}</h2>

JSX之外

您也可以在JSX代码之外使用模板字面量。

代码语言：javascript复制

const num = 50;

const result = `${num   50} percent`;

console.log(result); // 


	

https 网络安全 react 编程算法 


	




	
 0 人点赞