如何在 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 标签之外制作一个 function 并从标签内部调用 function？

Answer 1

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

前任：

render() {
  let someVariable = {id: 1: name: "x"}
  console.log(someVariable)
  return(
    <div>
      {JSON.stringfy(someVariable)} // brackets here
    </div>
  )
}

文档链接： 如何在 JSX 中添加 JS

Answer 2

所以我使用 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 3

在您的代码周围使用括号，以便 React 将其与 HTML 区分开来并且不呈现代码。