是否可以将react组件作为非react项目中的功能导出

IT技术 javascript reactjs
2021-05-20 21:11:27

有没有办法将react组件导出为函数并在非react项目中将props作为函数的参数传递？

我最近完成了一个带有 create-react-app 的 React 项目。现在我想将它用于其他非react项目（纯 Javascript + html、Angular 等）。

但是，由于这些项目不能仅使用 React 时尚（组合）中的组件。我想知道我们是否可以将 react 组件作为函数导出，这样我们就可以在不同的项目中使用它，而不必担心 react 的架构师。

例如：

export default class MyComponent extends React.Component{
    render(){
        return(
            <div>
                {"Hello World" + this.prop.name}
            </div>
        )
    }
}

然后将其导出为函数。所以在非react项目中，我可以做这样的事情：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Non-React App</title>
  </head>
    <script src="https://mydisk/ImportMyReact.js" ></script>

    <script>
      MyComponent("Jake")  
    </script>

  <body>
  </body>
</html>

我尝试使用 webpack 来捆绑它，但我没有运气，因为 bundle.js 是一段巨大的代码，我不能只从中导入某些功能。

2个回答

如果你想创建一个函数来渲染非react项目中的react组件，你可以这样做，但它需要使用 reactDom.render，因为这是获取react组件并将其渲染到的唯一方法dom。

React 组件本身不会修改 dom。他们所做的就是创建“虚拟 dom”，这是一组类型和props，然后 react-dom 可以使用它们来更新 dom。例如，让我们以最简单的组件为例：

() => <div/>

转译 jsx 后，这变成：

() => React.createElement("div", null);

如果你要运行这个函数，结果是一个普通的 javascript 对象，如下所示：

{
  $$typeof: Symbol(react.element),
  key: null,
  props: {},
  ref: null,
  type: 'div'
}

更复杂的组件将创建更复杂的对象，在类组件的情况下，它们通过其 render 方法创建它，但在所有情况下，结果都只是一个普通对象。创建这个对象时dom没有更新，组件不包含更新dom的逻辑。React-Dom 的工作是获取该对象并弄清楚如何更新 dom。

下面是一个示例，说明如何将函数打包用于呈现 React 组件的非 React 应用程序：

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  // etc
}

export default function renderMyComponent(element, name) {
  ReactDOM.render(<MyComponent name={name}>, element);
}


/** somewhere else: **/

renderMyComponent(document.getElementById('main'), 'Jake');

您可以导入另一个组件并像这样调用它：

import SecondComponent from './SecondComponent'

export default class App extends React.Component {
render() {
    return (
<SecondComponent />
) }
}
其它你可能感兴趣的问题
上一篇React JS - 单击时更改颜色并在所有其他颜色上添加默认颜色 下一篇在我用 injectIntl​​ 包装它后丢失react组件参考