本教程展示了在ReactJs组件中用变量连接字符串的多个例子。
React追加字符串数据变量
这个例子展示了React Component中的字符串变量连接。
创建了两个容纳字符串内容的字符串变量。使用+操作符将一个字符串追加到另一个。在组件中，使用javascript表达式来显示字符串。让我们来创建一个简单的函数组件。
import React from 'react';
const MyFunction = () => {
let hello = "Hello ";
let result = hello + " Welcome";
return (
{result} My application
)
}
export default MyFunction
输出:
Hello John Welcome to My application.
React将HTML原始字符串追加到字符串数据变量中
这个例子显示了将HTML字符串内容连接到另一个字符串常量。
声明的HTML原始字符串用双引号括起来，并追加到字符串变量常量中。
在该组件中，使用javascript表达式来显示字符串。
import React from 'react';
const MyFunction = () => {
let hello = "Hello ";
let result = hello + " John";
return (
{result} Welcome to My application
)
}
export default MyFunction
输出:
Hello John Welcome to My application
如何在JSX中把字符串变量追加到href图像标签上
这个例子显示了一个锚定链接，href被动态地追加了一个字符串变量。
锚点链接和href的动态生成有两种方式 一种方式是使用javascript表达式{} ，包含用常量和变量附加的字符串。
Contact Admin
另一种方式，使用ES6模板字面语法，变量被包含在插值语法（${}）中，被包裹在回车符号中。
Contact Support
它在运行时取代了变量的值。
请注意，包裹在反斜线内的不是单引号。
下面是一个完整的例子
import React from 'react';
const MyFunction = () => {
let adminEmail = "admin@cloudhadoop.com";
let supportEmail = "support@cloudhadoop.com";
return (
Contact Admin
Contact Support
)
}
export default MyFunction
你也可以使用append或es6模板字面语法将反应状态或道具字符串追加到URL的锚标签中。
总结
在React应用程序中，你可以通过以下两种方法将字符串变量与常量或状态或道具字符串进行追加:
- 用
+符号附加字符串 - ES6模板字面语法
