Hi,
there seems to be something strange with... well, I do not even know with what but I have been using this stack for some time and it has never been a problem. I created a new store CanvasStore and I have a component Entity which renders this:
<div className={entityStyle.entity}>
<h1>{this.props.name}</h1>
</div>
The className is imported like it can be seen in the other components from you. In this component I have componentDidMount function, which uses AppActions to notify CanvasStore about the dimensions of the mounted entity so it looks like this:
let width = React.findDOMNode(this).clientWidth;
let height = React.findDOMNode(this).clientHeight;
AppActions.entityMounted(this.props.id, width, height);
And I have two problems:
1. width and height are equal to values when the div has no styling (width is equal to 100% of the parent, screen in this case, and height is equal to the font size of the text in h1)
2. When I save the dimensions and call emitChange() in the CanvasStore, nothing happens. No callback is triggered so the UI is out of sync with the global state
I figured out that the solution for this is to surround the content of componentDidMount in setTimeout() function like this.
setTimeout( ()=>{
let width = React.findDOMNode(this).clientWidth;
let height = React.findDOMNode(this).clientHeight;
AppActions.entityMounted(this.props.id, width, height);
});
Then everything starts to work, I get the correct dimensions of the Entity and the App component loads the new global state because emitChange() was called in the CanvasStore. My question is- Why do I have to have the setTimeout function there? Is this a bug or it is just me? Thanks :-)
Hi,
there seems to be something strange with... well, I do not even know with what but I have been using this stack for some time and it has never been a problem. I created a new store CanvasStore and I have a component Entity which renders this:
The className is imported like it can be seen in the other components from you. In this component I have componentDidMount function, which uses AppActions to notify CanvasStore about the dimensions of the mounted entity so it looks like this:
And I have two problems:
I figured out that the solution for this is to surround the content of componentDidMount in setTimeout() function like this.
Then everything starts to work, I get the correct dimensions of the Entity and the App component loads the new global state because emitChange() was called in the CanvasStore. My question is- Why do I have to have the setTimeout function there? Is this a bug or it is just me? Thanks :-)