Question

在未反应的项目中，有没有一种方法可以将react组件导出为函数，并将props传递为该函数的参数？

我最近用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是一段巨大的代码，我无法从其中导入某些功能。

Answer 1

如果您想创建一个在非反应项目中呈现React组件的函数，则可以执行此操作，但这将需要使用reactDom.render，因为这是获取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组件：

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

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

import SecondComponent from './SecondComponent'

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

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

2 个答案: