是否可以将反应组件导出为非反应项目中的功能答案

【问题标题】：Is it possible to export react component as function in non-react project是否可以将反应组件导出为非反应项目中的功能
【发布时间】：2019-06-21 16:58:33
【问题描述】：

有没有办法将 React 组件导出为函数，并将 props 作为非 React 项目中函数的参数传入？

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

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

例如：

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

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

<!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 是一段巨大的代码，我不能只从中导入某些函数。

【问题讨论】：

您将构建作为 UMD 模块。
@epascarello 这就是我用 Webpack 尝试过的。没有运气。我不想将它发布到 npm，因为我的其他项目不使用节点（ASP.MVC）。在不将其发布到 npm 的情况下还有其他选择吗？
React functional stateless component, PureComponent, Component; what are the differences and when should we use what?的可能重复
@JaredSmith 我确实研究了功能组件等。这没有帮助，因为我的组件实际上需要是一个类，因为我正在使用生命周期方法。
我相信你可能需要 WebComponent 作为适配器层。看看npmjs.com/package/react-web-component

标签： javascript reactjs

【解决方案1】：

如果你想创建一个函数来渲染一个非反应项目中的反应组件，你可以这样做，但它需要使用 reactDom.render，因为这是获取反应组件的唯一方法并且将其渲染到 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 的逻辑。获取该对象并弄清楚如何更新 dom 是 React-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');

【讨论】：

如果我不清楚，我很抱歉。我不是在寻求帮助以将数据作为道具传递并渲染它们。相反，我试图找到“将其导出为函数”的方法，以便我可以在非反应环境中使用它。另外，由于我试图在非反应项目中使用它，我认为 ReactDom.render() 不会是一个想法，因为它仍然是 React
rather, I am trying to find it way to "export it as function" so i can use it in non-react environment 是的，这正是我想要展示的。 renderMyComponent 是一个可以在任何项目中使用的函数，react 或其他。然后该函数将渲染一个 MyComponent 。Also, since I am trying to use it in non-react project, i think ReactDom.render() would not be idea since it is still React ReactDom.render 是向 dom 渲染一个 react 组件的唯一方法。
有没有办法只“导出默认”组件并在非反应（纯 JavaScript）上调用 ReactDOM.render()？喜欢：<script type="module" type="text/javascript"> import ReactMap from '/react_build/ReactMap.bundle.js'; var domContainer = document.querySelector('#mapbox_div'); ReactDOM.render(React.createElement(ReactMap), domContainer); <script/>

【解决方案2】：

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

import SecondComponent from './SecondComponent'

export default class App extends React.Component {
render() {
    return (
<SecondComponent />
) }
}

【讨论】：

如果我不清楚，我很抱歉。我不是在寻求帮助以将数据作为道具传递。相反，我正在尝试找到“将其导出为函数”的方法，以便我可以在非反应环境中使用它
当然可以，react 是关于组件的，因此你可以定义你的组件，并且可以轻松地在你的类中调用。
我正在尝试在“非反应环境”中进行。
他正在寻找将反应组件转移到非反应项目@RitvizSharma