如何解决为什么在 React 中你可以在不使用模板文字 sintax 的情况下在 html 元素中表达一个变量?
我正在关注和阅读一系列关于 React 的课程,但我很困惑,有时我看到使用模板文字表示法来表达 html 元素中的变量,例如 p 和 h 元素,有时对于相同的元素没有这样的用途。 ReactJS documentation 中的一个示例:
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
为什么p标签里面的表达式不是这样写的?
<p>`You clicked ${this.state.count} times`</p>
解决方法
在 JSX 中,JavaScript 表达式 总是由 {
}
括号分隔。例如
{this.state.count}
{() => this.setState({ count: this.state.count + 1 })}
除非您使用方括号,否则您不能使用 JavaScript 表达式 - 您只能编写纯文本。语法就是这样设计的。
如果需要,您可以为 <p>
内容使用模板文字,但模板文字是 JS 表达式,因此您需要将 {{1} 的整个内容括起来}}:
<p>
,
模板文字语法仅在代码的 javaScript 区域内可用,因此您只能在 {}
内使用它
所以在你的情况下,它会像这样完成。
<p>{`You clicked ${this.state.count} times`}</p>
但在这种情况下,如果没有像这样的模板字面量,这样做会更简单
<p>You clicked {this.state.count} times</p>
,
例如,如果您只是打印数字或字符串的值,则不需要在 react 中使用模板字符串来显示变量。
您不需要模板字符串来显示数组或对象中的值
{obj.key}
{array[3])
上面的例子都没有文字打印
如果出于某种原因您需要显示单词 true 或 false,这同样不适用于布尔值。
我认为人们只是习惯了使用它们,所以在反应中继续这样做,但在大多数情况下没有任何必要
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。