Add an option to avoid initial render of content #63
Comments
In the following a solution using the version before #19 was applied, namely version import React from 'react';
import ReactCollapse from 'react-collapse';
const Collapse = React.createClass({
getInitialState: () => ({never_rendered: true}),
componentWillReceiveProps: function(nextProps) {
if( nextProps.isOpened ) {
this.setState({never_rendered: false});
}
},
render: function(){
if( this.state.never_rendered ) {
return null;
}
return (
<ReactCollapse isOpened={this.props.isOpened}>
{this.props.children}
</ReactCollapse>
);
},
}); |
|
Hi! In this case "children" are being rendered in your parent component. It is not a concern of Collapse in this case. ^ that would be a solution |
|
I mean that when props.children are passed to collapse - they are already rendered =) |
Ah thanks true, I didn't think about it. Sorry. I accordingly changed the original post and its example.
I just tried out and it works. Thanks. Actually, I thought about your solution before but I dismissed it because in my head the dynamic height feature was stamped as not reliable. But I think I now know why it isn't always "reliable". I now use the following Component to transparently use the wished feature. import React from 'react';
import ReactCollapse from 'react-collapse';
const Collapse = React.createClass({
getInitialState: function() {
return {
never_rendered: !this.props.isOpened,
};
},
componentWillReceiveProps: function(nextProps) {
if( nextProps.isOpened ) {
this.setState({never_rendered: false});
}
},
render: function(){
return (
<ReactCollapse isOpened={this.props.isOpened}>
{!this.state.never_rendered && this.props.children}
</ReactCollapse>
);
},
});It could be nice to have |
|
Yep exactly, you are correct. I can't see why adding this into collapse itself, since you already have component wrapper that perfectly works in your case. I try to keep collapse a very lean component so all extras can be added by wrapping. The reason is that it adding more features makes readme way heavier and component itself. Which reduces its wrappability at the end. |
|
Ok. |
|
Yeah, I don't think we can do much about this particular case since it
|
|
Hey, @brillout! You were right, there was an actual bug in react-collapse, which is captured here #66 It is now fixed by big rewrite #72 and published as I will later supply migration docs, though there are not so many big changes to public API and most of things should work as usual |
|
|
|
Great! |
Uh oh!
There was an error while loading. Please reload this page.
Currently the following will log
I am being rendered.In case of many initially collapsed elements, it can be a considerable performance penalty to render all collapsed content.
An option could determine if these should be initially rendered.
Although I'm not sure why someone would want to initially render a hidden element.
Alternatively, a solution would be to implement #19 as an option. The following construct would then achieve the wished behavior.
Thanks for
<Collapase/>btw :-)The text was updated successfully, but these errors were encountered: