CODEWITHSUNDEEP
javascriptreactjscoffeescript
Yves Lange
Yves Lange

Reputation: 3994

ReactJS use a webcomponent in JavaScript

I could find a lot of documentation to use a WebComponent using JSX in React. Well it's pretty straight forward...

But how to use a webcomponent in JavaScript with ReactJS ??

render: function(){
  React.DOM.div {}, 
    MyWebComponent {}, "hello"

Where 'MyWebComponent' is the component that I want to work with.

Upvotes: 0

Views: 125

Answers (2)

Train
Train

Reputation: 3506

In JavaScript react.createElement takes an element or componant as the first argument, styles as the second argument, children as the third agrument.

            import customComponent from 'my-custom-component';
            var child = React.createElement(customComponent, null, 'Text Content');
            var Element = React.createElement('div', { className: 'my-class' }, child);


            render: function(){ 
                {Element}
            }

or you can do this

...
 import customComponent from 'my-custom-component';
...

render: function(){ 
       {React.createElement('div', { className: 'my-class' },customComponent );}
}

Upvotes: 3

G3z
G3z

Reputation: 656

As stated in the official react site you should be able to use web components with react 

render: function(){
  return <div><MyWebComponent>hello</MyWebComponent></div>;
}

here is the same example in pure js

render: function render() {
  return React.createElement(
    "div",
    null,
    React.createElement(
      MyWebComponent,
      null,
      "hello"
    )
  );
}

Upvotes: 2

Related Questions