admin管理员组

文章数量:1332896

Is there a way to export react ponent as function and pass in props as params of the function in non-react project?

I am recently finished a react project with create-react-app. Now i wanted to use it to other non-react project(pure Javascript + html, Angular etc).

However, since these projects can not just use the ponent in React fashion(position). I am wondering if we can export react ponent as function, so we can just use it across different projects without worrying about react's architect.

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.

Is there a way to export react ponent as function and pass in props as params of the function in non-react project?

I am recently finished a react project with create-react-app. Now i wanted to use it to other non-react project(pure Javascript + html, Angular etc).

However, since these projects can not just use the ponent in React fashion(position). I am wondering if we can export react ponent as function, so we can just use it across different projects without worrying about react's architect.

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.

  • javascript
  • reactjs
Share Improve this question edited Jan 28, 2019 at 16:40 ZpfSysn asked Jan 28, 2019 at 16:23 ZpfSysnZpfSysn 8892 gold badges12 silver badges33 bronze badges 9
  • You make a build as a UMD Module. – epascarello Commented Jan 28, 2019 at 16:25
  • @epascarello that's what I have tried with Webpack. Did not have luck with it. I do not wish to publish it to npm because my other project does not use node(ASP.MVC). Is there other options without publishing it to npm? – ZpfSysn Commented Jan 28, 2019 at 16:29
  • Possible duplicate of React functional stateless ponent, PureComponent, Component; what are the differences and when should we use what? – Jared Smith Commented Jan 28, 2019 at 16:38
  • @JaredSmith I did look into functional ponent and such. It is not helpful because my ponent in reality needs to be a class because I am using life-cycle methods. – ZpfSysn Commented Jan 28, 2019 at 16:43
  • I believe you may need WebComponent as adapter layer. take a look into npmjs./package/react-web-ponent – skyboyer Commented Jan 28, 2019 at 16:50
 |  Show 4 more ments

2 Answers 2

Reset to default 9

If you want to create a function that will render a react ponent 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 ponent and render it to the dom.

React ponents do not modify the dom themselves. 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 ponents:

() => <div/>

After transpiling the jsx, this turns into:

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

And if you were to run this function, the result is a plain javascript object that looks like this:

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

More plicated ponents will create more plicated objects, and in the case of class ponents they create it via their render method, but in all cases the result is just a plain object. The dom has not been updated in creating this object, and the ponent contains no logic for updating the dom. It's React-Dom's job to take that object and figure out how to update the dom.

Here's an example of how you might package up a function for use in a non-react application which renders a react ponent:

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');

You can import another ponent and call it like this:

import SecondComponent from './SecondComponent'

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

本文标签： javascriptIs it possible to export react component as function in nonreact projectStack Overflow

版权声明：本文标题：javascript - Is it possible to export react component as function in non-react project - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742317531a2452122.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。