如何在 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>  )}

Answer 2

在代码周围使用方括号，以便 React 将其与 HTML 区分开来，并且不会渲染代码。