如何在一个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;

类团队扩展组件{
状态={
团队：[]
}
componentDidMount（）{
...
}
abc=（）=>{
...
};
render（）{
返回(






团队






{
这个,abc()
}
);
}
}
导出默认团队；

基本上，我想知道是否有办法在html标记之间插入js代码；也就是说，有没有这样的方法：

<div>
   //js code 
   let x = "hello";
   console.log(x);
</div>

//js代码
让x=“你好”；
控制台日志（x）；

---

我尝试过使用html脚本标签，并在两者之间插入js代码，但都不起作用。我是否必须在html标记之外创建一个函数，然后从标记内部调用该函数？

使用

{}

，它用于在html内部使用JS/JSX

<div>
   {
   //js code 
   let x = "hello";
   console.log(x);
    }
</div>

{
//js代码
让x=“你好”；
控制台日志（x）；
}

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

例：

render（）{
让someVariable={id:1:name:“x”}
console.log（someVariable）
返回(
{JSON.stringfy（someVariable）}//括号在这里
)
}

链接到文档：

---

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

非常感谢！再多争取几个代表，这样你就可以对剩下的答案进行投票了。

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