个人中心
gpt4 book ai didi

javascript - 是否可以将 react 组件导出为非 react 项目中的函数

转载 作者：行者123 更新时间：2023-12-01 01:19:08 25 4
gpt4 key购买 nike

有没有办法在非 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 是一段巨大的代码，我无法从中导入某些函数。

最佳答案

如果你想创建一个在非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'
}

更复杂的组件将创建更复杂的对象，对于类组件，它们通过渲染方法创建它，但在所有情况下，结果都只是一个普通的对象。创建此对象时 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');

关于javascript - 是否可以将 react 组件导出为非 react 项目中的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54406256/

25 4 0
文章推荐： database-design - 数据库设计 : stock & option trades
文章推荐： javascript - 在 react 渲染中调用格式化函数是不好的做法吗？
文章推荐： javascript - Ajax 路径适用于一个数组，但不适用于另一个数组
文章推荐： javascript - 使用 Node JS 抓取网站的 javascript 变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com