如何在 javascript 文件中的所有 html 标记之间包含 javascript

Question

所以我使用 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 标签之外创建一个函数，然后从标签内部调用该函数？

Answer 1

你不能在 JSX 代码中声明变量，但是你可以访问之前声明的变量和函数。要在 JSX 中插入 JS，您必须在 JS 代码周围使用方括号 {}。

前任：

render() {

  let someVariable = {id: 1: name: "x"}

  console.log(someVariable)

  return(

    <div>

      {JSON.stringfy(someVariable)} // brackets here

    </div>

  )

}