如何访问/调用 JSX 文件中的 javascript 函数？答案

【问题标题】：How can i access/invoke javascript function in JSX file?如何访问/调用 JSX 文件中的 javascript 函数？
【发布时间】：2017-10-30 02:13:56
【问题描述】：

我有一个 html 文件、.js 文件和 .jsx 文件。我在 html 文件中添加/导入了 .js 和 .jsx 文件。

.js 文件具有返回 div 标签的功能。

我想将此函数返回的值渲染到 html 中的根 div 标签中。

我正在考虑在 JSX 中调用 JS 函数并使用 ReactDOM.render 渲染此 JS 函数返回的值。

是否可以从 .jsx 文件中调用 JS 函数？

index.html 有以下内容

<!DOCTYPE html>
<html>
  <head>`enter code here`
    <meta charset="UTF-8" />
    <title>Hello World</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <script type="text/babel" src="test.jsx"></script>
  <script type="text/javascript" src="test.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

test.js 有以下内容

function alertme() {
    return "<div><h1>Hello, world!</h1></div>"         
}

test.jsx 有以下内容

function tick() {
  const element = (
  <div>{alertme()}</div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}
tick();

显示完整的 html 标记而不是显示 hello world

有什么办法可以解决这个问题？

【问题讨论】：

您需要考虑使用模块加载器。想想webpack。您不能只将所有文件都包含在一个页面中并希望获得很大的成功。（虽然可以将函数存储到window）

标签： javascript html reactjs

【解决方案1】：

是的，您可以在.jsx文件中访问.js文件的功能。

您只需将 .js 文件导入您要使用该方法的文件。

例如：

import { connect } from 'react-redux';

现在在您的 jsx 文件中，您可以使用带有所需参数的 connect 方法。

以上导入只是举例。

希望对你有帮助

【讨论】：

感谢您的回复！我已经修改了原始帖子以简化我的问题。你现在可以再看看这个问题吗？

【解决方案2】：

您可以使用 react 提供的 dangerouslySetInnerHTML 函数将字符串转换为 React 元素。https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

一般来说，从代码中设置 HTML 是有风险的，因为很容易在不经意间让您的用户受到跨站脚本 (XSS) 攻击。所以，你可以直接从 React 中设置 HTML，但你必须输入 dangerouslySetInnerHTML 并使用 __html 键传递一个对象，以提醒自己这是危险的。

function alertme() {
  return "<div><h1>Hello, world!</h1></div>"
}

function tick() {
  const element = <div dangerouslySetInnerHTML={{__html: alertme()}}></div>;
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}
tick();

<!DOCTYPE html>
<html>

<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>

【讨论】：

感谢您的回复！我已经修改了原始帖子以简化我的问题。你现在可以再看看这个问题吗？