javascript - 如何在 javascript 文件中的所有 html 标记之间包含 javascript
问题描述
所以我使用 React 创建一个 web 应用程序,我只使用 js 文件和 css 文件,没有 html。我有一个这样的 js 文件,其中包含一些 html 代码和一些 js 代码:
class Teams extends Component {
state = {
teams: []
}
componentDidMount() {
...
}
abc = () => {
...
};
render() {
return (
<Container>
<Row className="space"></Row>
<br></br>
<br></br>
<Row className="about-row"><h3>Teams</h3></Row>
<br></br>
<br></br>
<Row className="about text-center">
{
this.abc()
}
</Row>
</Container>
);
}
}
export default Teams;
基本上我想知道是否有办法在 html 标签之间插入 js 代码;即有没有办法做这样的事情:
<div>
//js code
let x = "hello";
console.log(x);
</div>
我尝试过使用 html 脚本标签并在其间插入 js 代码,但它不起作用。我是否必须在 html 标签之外创建一个函数,然后从标签内部调用该函数?
解决方案
你不能在 JSX 代码中声明变量,但是你可以访问之前声明的变量和函数。要在 JSX 中插入 JS,您必须在 JS 代码周围使用方括号 {}。
前任:
render() {
let someVariable = {id: 1: name: "x"}
console.log(someVariable)
return(
<div>
{JSON.stringfy(someVariable)} // brackets here
</div>
)
}
链接到文档: 如何在 JSX 中添加 JS