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

Question

Is there a way to export react component as function and pass in props as params of the function in non-react project? 有没有办法在非反应项目中将react组件导出为函数，并传递props作为该函数的参数？

I am recently finished a react project with create-react-app. 我最近用create-react-app完成了一个react项目。 Now i wanted to use it to other non-react project(pure Javascript + html, Angular etc). 现在我想将其用于其他非反应性项目（纯Javascript + html，Angular等）。

However, since these projects can not just use the component in React fashion(composition). 但是，由于这些项目不能仅以React方式（组成）使用组件。 I am wondering if we can export react component as function, so we can just use it across different projects without worrying about react's architect. 我想知道是否可以将react组件导出为功能，因此我们可以在不同项目中使用它而不必担心react的架构师。

For instance: 例如：

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

And then export it as function. 然后将其导出为函数。 So in the non-react project, i can do something like this: 因此，在非反应项目中，我可以执行以下操作：

<!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>

I tried to use webpack to bundle it, but I have no luck because the bundle.js is a giant piece of code that I cant just import certain function out of it. 我尝试使用webpack对其进行捆绑，但是我没有运气，因为bundle.js是一段巨大的代码，我无法从其中导入某些功能。

Answer 1

If you want to create a function that will render a react component in a nonreact project, you can do that, but it's going to need to make use of reactDom.render, since that's the only way to take a react component and render it to the dom. 如果您想创建一个在非反应项目中渲染React组件的函数，可以这样做，但是它需要利用reactDom.render，因为这是获取React组件并将其渲染到dom。

React components do not modify the dom themselves. React组件不会自行修改dom。 All they do is create the "virtual dom", which is a set of types and props that react-dom can then use to update the dom. 他们所做的只是创建“虚拟域”，它是反应域可以用来更新域的一组类型和道具。 For example, let's take the very simplest of components: 例如，让我们看一下最简单的组件：

() => <div/>

After transpiling the jsx, this turns into: 编译jsx之后，结果变为：

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

And if you were to run this function, the result is a plain javascript object that looks like this: 如果要运行此函数，结果将是一个普通的javascript对象，看起来像这样：

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

More complicated components will create more complicated objects, and in the case of class components they create it via their render method, but in all cases the result is just a plain object. 更复杂的组件将创建更复杂的对象，对于类组件，它们将通过其render方法创建它，但是在所有情况下，结果只是一个普通对象。 The dom has not been updated in creating this object, and the component contains no logic for updating the dom. 创建该对象时尚未更新dom，并且该组件不包含用于更新dom的逻辑。 It's React-Dom's job to take that object and figure out how to update the dom. React-Dom的工作是拿走那个物体并弄清楚如何更新dom。

Here's an example of how you might package up a function for use in a non-react application which renders a react component: 这是一个示例，说明如何打包一个函数以在呈现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');

Answer 2

You can import another component and call it like this: 您可以导入另一个组件并按如下方式调用它：

import SecondComponent from './SecondComponent'

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

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-01-28 16:33:54

解决方案2
0 2019-01-28 16:39:20

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-01-28 16:33:54

解决方案2 0 2019-01-28 16:39:20

解决方案1
2 已采纳 2019-01-28 16:33:54

解决方案2
0 2019-01-28 16:39:20