aarongreenwald
commented
5 years ago I tried to reproduce but it didn't reproduce for me. What I did: I modified the ReactDot test component to have a required prop and for good measure added a special error in the constructor if the prop was not passed. Then I added the prop in the Angular template. I didn't get any errors. Here's my code:
// tslint:disable:no-input-rename
// tslint:disable:no-output-rename
import {
Component,
ChangeDetectionStrategy,
Input,
Output,
EventEmitter,
ElementRef,
ViewChild,
ChangeDetectorRef,
Renderer2,
NgZone,
} from '@angular/core';
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { ReactWrapperComponent } from '@angular-react/core';
@Component({
selector: 'app-react-dot',
template: `
<ReactDot
#reactNode
[text]="text"
[foo]="'bar'"
(onMouseEnter)="onMouseEnter($event)"
(onMouseLeave)="onMouseLeave($event)"
[styles]="{
width: size,
lineHeight: size,
height: size,
left: x,
top: y,
color: color,
backgroundColor: backgroundColor,
fontSize: size
}"
>
<react-content> <ng-content></ng-content> </react-content>
</ReactDot>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
styles: ['react-renderer'],
})
export class ReactDotComponent extends ReactWrapperComponent<ReactDotProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input() x: string;
@Input() y: string;
@Input() size: string;
@Input() text: string;
@Input() color: string;
@Input() backgroundColor: string;
@Input() textOverride: string;
@Output('onMouseEnter') readonly mouseEnter = new EventEmitter<MouseEvent>();
@Output('onMouseLeave') readonly mouseLeave = new EventEmitter<MouseEvent>();
onMouseEnter = (ev: MouseEvent) => this.mouseEnter.emit(ev);
onMouseLeave = (ev: MouseEvent) => this.mouseLeave.emit(ev);
get computedText() {
return this.textOverride && this.text ? this.textOverride : this.text;
}
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true });
}
}
interface ReactDotProps {
onMouseEnter?: (ev: MouseEvent) => void;
onMouseLeave?: (ev: MouseEvent) => void;
text: string;
foo: string;
styles?: object;
}
export class ReactDot extends React.Component<ReactDotProps> {
private static defaultStyle = {
display: 'block',
position: 'absolute',
textAlign: 'center',
borderRadius: '30%',
cursor: 'pointer',
};
static propTypes = {
foo: PropTypes.string.isRequired
}
constructor(props) {
super(props);
if (!props.foo) {
throw new TypeError('ReactDot requires a foo prop');
}
}
render() {
const { text, styles, foo, ...rest } = this.props;
return React.createElement(
'div',
{
...rest,
style: {
...ReactDot.defaultStyle,
...styles,
},
},
[this.props['text'], ...(this.props.children as any)]
);
}
}The foo prop is the one I added.
RyanHow
stale[bot]
Hi!
I'm trying to create a wrapper around a React component to use within Angular. I haven't done much with React before, so that side of things is quite new to me.
I'm getting an error that a prop is required, but I am supplying that prop.
I had a look and the component is expecting a prop to be set when it is created. However it appears that in Angular-React, the property is supplied later.
The component still works, but it logs a whole lot of errors before it starts working.
The error is like this:
The code that is throwing the error is this:
In my template I have (This is slightly simplified, there are multiple related components in there)
And fetch is a function in the class (and it is being called)
So I am just wondering if I am doing anything incorrectly, or is there a way I can supply the fetch prop earlier on to avoid the error?
Thanks!
Ryan