xjpro / react-in-angularjs

A super simple way to render React components in AngularJS
The Unlicense
23 stars 13 forks source link

React component getting loaded, but its contens are not getting displayed #27

Open chiragt-thirdrock opened 1 year ago

chiragt-thirdrock commented 1 year ago

Hello devs,

I am facing weird issue when using react-in-angularjs in my angular 1 project.

here i am sharing code snippet to get it understand.

reactComponent.js

import * as React from "react";
import {angularize} from "react-in-angularjs";

class TodoList extends React.Component {
    render() {
      let e = React.createElement('div', null, `Hello I am react`);

      return e;
    }
  }

angularize(TodoList, "appTodoList", angular.module("app"), {});

index.html

<todo-list id="react-app"> </todo-list>

DOM

package.json

Let me know if anybody have solution of this.

warren-hall-pq commented 2 months ago

The element property values are available but only deeply nested on the object returned to the React function now.

Example:

// Usage
 <react-integration id="react" innerText="Settings"></react-integration>

// Component
export const ReactIntegration = (props) => {
    return (
           <Button>
            {props.root._internalRoot.containerInfo.attributes.getNamedItem("innerText").value}
           </Button>
    )
};