mjangir / reactron

A full featured and highly scalable electron-react boilerplate
39 stars 15 forks source link

React-uwp component work abnorm in reactron #6

Open PitterL opened 5 years ago

PitterL commented 5 years ago

Hi, Manish: I'm uing uwp UI in reactron. So I installed the package of react-uwp, when i tried the commandbar component, i found it couldn't render out the object. There is no icons displayed for primaryCommands of the introduce page. At former i think it may be an UI component issue, but after i tested the pure create-react-app, the UI component is working normal. And then, I tested in basic create-react-app in electron environment, it still working normal.

the code is here:

https://www.react-uwp.com/components/commandbar

After npm install react-uwp, just copy the "Simple Examples" of the linked page. And create a page in app/containers/testUWPPage, you could call the page in in App/index.js, you could see the result.

PitterL commented 5 years ago

Hi, Manish: I traced the issue and found UWP use a function comparison in code. They compared react children type with origin function at render. So i did a simulated code like it:

In "index.js":

import {TestB} from "./MyComponent";

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default class AppUWP extends React.Component {
  render() {
    const result = (
        <Welcome>
        <TestB />
        </Welcome>
    )
    console.log("<UwpPage> children type:", result.props.children.type);
    console.log("<UwpPage> componet:", TestB);
    console.log("<UwpPage> equal:", result.props.children.type == TestB);
    return result;
  }
}

in "MyComponent"

export class TestB extends React.Component {
  render() {
    return <div />;
  }
}

The i get print log:

<UwpPage> children type: class TestB extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
  render() {
    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null);
  }
}
index.js?d00c:20 <UwpPage> componet: class TestB extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
  render() {
    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null);
  }
}
index.js?d00c:21 <UwpPage> equal: false

There the children type is not equaled to the original function, Have you get any idea that why they are not equaled each other?