react中js文件中写html,reactjs – 从React组件中的外部加载的HTML访问内部函数

在React中，通常不建议在JS文件中直接写HTML代码，而是使用JSX语法来描述UI组件的结构。如果你想从React组件中的外部加载HTML并且访问内部函数，可以考虑以下两种方法：

1. 使用dangerouslySetInnerHTML属性

在React中，可以使用dangerouslySetInnerHTML属性将HTML代码作为字符串传递给组件，并在组件中渲染该HTML代码。但是，这种方法存在安全隐患，因为它可以导致跨站脚本攻击（XSS）。因此，必须确保HTML代码是可信的，并且应该避免在生产环境中使用。

以下是一个示例代码：

function MyComponent() {
  const html = '<div>Hello World</div>';

  function handleClick() {
    console.log('Button clicked');
  }

  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: html }}></div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

在这个例子中，我们定义了一个字符串变量`html`，它包含要加载的HTML代码。然后，我们在组件的JSX代码中使用`dangerouslySetInnerHTML`属性将该HTML代码渲染到页面上。同时，我们还定义了一个内部函数`handleClick`，并将其绑定到一个按钮的`onClick`事件上。

2. 使用React Portals

另一种方法是使用React Portals，它允许你将组件的输出渲染到DOM中的任何位置，而不仅仅是组件树中的直接父组件。这意味着你可以在组件外部的任何位置加载你的HTML代码，并且仍然可以访问组件内部的函数。

以下是一个示例代码：

import ReactDOM from 'react-dom';

function MyComponent() {
  const html = '<div>Hello World</div>';

  function handleClick() {
    console.log('Button clicked');
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

function App() {
  const portalContainer = document.getElementById('portal-container');

  return (
    <div>
      <div>Some content here</div>
      {ReactDOM.createPortal(<MyComponent />, portalContainer)}
    </div>
  );
}

在这个例子中，我们定义了一个`MyComponent`组件，它包含一个内部函数`handleClick`。然后，在`App`组件中，我们使用`createPortal`函数将`MyComponent`组件的输出渲染到`portalContainer`元素中。这样，我们就可以在`MyComponent`组件外部加载HTML代码，而仍然可以访问`MyComponent`组件内部的函数。