Question

我有一个js文件，它是使用react的较大网站的一部分。我有一个类，在render＆return内部，我有一个div，它显示一个弹出窗口，在里面，我想像以前一样添加JavaScript，但是脚本的第一行给出了[ts] Expression Expected错误。

代码示例：

<div className='popup_inner'>
{
//the script, fails first line on var with [ts] Expression Expected
var necc = $('example')[0]; 
//more code 

}
</div>

稍后在代码中，我会做同样的事情

<div className='example2'>
<button onClick = {script variable}> Save </button>

我已经完成了许多Google搜索，并使用<script>代替了{}，但没有任何区别。任何人有任何想法吗？

Answer 1

如@HarishSoni所述，您可能没有从jQuery导入$。

如果您只需要在此div中分配一个变量，则建议您在此处用纯JavaScript变量分配代替jQuery变量分配，如下所示：

<div className='popup_inner'>
{
var necc = document.querySelector('example'); // you dont need to add [0] since querySelector returns the first element by default
}
</div>

更新：@Moosecouture的答案是正确的方法。变量分配应在render内但在return之外进行，如下所示：

class SomeReactClassName extends React.Component {
  render(){
    var necc = document.querySelector('example');
    return (
      <div className='popup_inner'>
        <p>The variable above is {necc}</p>
      </div>
    )
  }
}

Answer 2

这绝对是一个ReactJs问题。因此，您不能在react return语句中进行任何声明。

React调用看起来像这样：

const ReactElement = () => {
  var dataInside = 'Something Something'
  return <div>{dataInside}</div>
}

查看如何在return语句上方声明变量。

您正试图在声明变量dataInside的位置时返回。您正在执行的操作不会返回任何内容，请在return语句之前将其上移。如果您真的想将jQuery与React混合使用，可以执行以下操作

const ReactElement = () => {

  var necc = $('example'); 

  return <div dangerouslySetInnerHTML={{__html: necc.html()}}>
}

在div内部（在React .js文件中）使用脚本会引发错误

2 个答案: