wix-incubator / react-templates

Light weight templates for react
https://wix.github.io/react-templates
MIT License
2.82k stars 207 forks source link

introducing `rt-repeat` is causing ReferenceError #210

Open TimKraemer opened 7 years ago

TimKraemer commented 7 years ago

Hey there,

I'm playing around with react-templates and ant-design. Unfortunately using rt-repeat breaks my code:

<rt-import name="Breadcrumb" from="antd" />
<div>
    <Breadcrumb>
        <Breadcrumb.Item rt-repeat="s in this.state.breadcrumbs">{s}</Breadcrumb.Item>
    </Breadcrumb>
</div>

results in: ReferenceError: Breadcrumb is not defined. However without rt-repeat it works fine:

<rt-import name="Breadcrumb" from="antd" />
<div>
    <Breadcrumb>
        <Breadcrumb.Item>Test</Breadcrumb.Item>
    </Breadcrumb>
</div>

Using native HTML elements works as expected:

<rt-import name="Breadcrumb" from="antd" />
<div>
    <ul>
        <li rt-repeat="s in this.state.breadcrumbs">{s}</li>
    </ul>
</div>

I suspect rt-repeat is somehow affecting the current variable scope, but I'm not involved enough to understand how and why.

nippur72 commented 7 years ago

I tried to replicate the error but I wasn't able to install antd (via npm install antd --save but webpack complains about unresolved .js files).

So I simulated it (in TypeScript):

class Item extends React.Component<any,any> {
   render() {
      return <div>breadcrumb.item start {this.props.children} breadcrumb.item end</div>;
   }
}

export class Breadcrumb extends React.Component<any,any> {
   static Item = Item;
   render() {
      return <div>breadcrumb start {this.props.children} breadcrumb end</div>;
   }
}

(this creates a Breadcrumb component that has a subcomponent Item as a static property).

Using your template it seem to work properly:

// this.state.breadcrumbs = [1,2,3,4];
breadcrumb start 
breadcrumb.item start 1 breadcrumb.item end
breadcrumb.item start 2 breadcrumb.item end
breadcrumb.item start 3 breadcrumb.item end
breadcrumb.item start 4 breadcrumb.item end
breadcrumb end

Is there a quick way to install antd so I can check it?

TimKraemer commented 7 years ago

I tried to replicate the error but I wasn't able to install antd (via npm install antd --save but webpack complains about unresolved .js files).

I installed it the same way, no complains there. They have a way to import it in the browser. Maybe that will work? If not I'll look into creating a jsfiddle or github-repo to reproduce a minimal example of my problem.

Thank you for your dedication!

nippur72 commented 7 years ago

I wasn't able to install antd (lot of troubles with react 15.4) so I opted for a CodePen example:

http://codepen.io/anon/pen/RKXpvM?editors=0010

I've taken the output directly from the react-templates playground and adapting it for the browser / codepen.