-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Render Not Displaying HTML #173
Comments
Hi @donadley - what versions of |
I am using [email protected] and I am not using preact-router. |
One thing that stands out to me is the |
The viewReference is used to store the last vNode so that the view doesn't display twice. In this case re-displaying the same vNode. So the viewReference is never displayed. |
@donadley Hmm - that re-use logic is already handled in Preact, though. Repeated renders of equivalent VNodes is an empty diff. I invited you to the gitter room if you want to chat. |
@developit Thank you, I removed it and it does not reload the previous vNode. |
The objective of the pages component were to change the view. I am bundling the code using browserify and then I am adding the bundle to another web application, kind of like a widget. I first attempted to navigate the views using preact-router, but It seems like I needed to reference the url. This couldn't be done because the views were from a bundle. Do you have any suggestions on how I can accomplish navigating through the view? |
You can manually specify a URL for However, if you just want to conditionally render components based on a view or some state (like "is logged in"), you could just use conditionals: class Views extends Component {
state = {
view: this.props.view // can pass default view in as a prop
};
// route to a given view
route = view => {
this.setState({ view });
};
// child components can call: this.context.route('some-view');
getChildContext() {
return { route: this.route };
}
render({ children }, { view }) {
// just render the child whose `name` prop matches the current view:
return children.filter( child => child.attributes.name===view )[0] || null;
}
}
// Trick: for logged-out, skip the router/views entirely:
class App extends Component {
// initialize our state to the auth store's state:
state = AuthStore.getState();
onChange = () => {
this.setState(AuthStore.getState());
};
componentDidMount() {
AuthStore.addChangeListener(this.onChange);
}
componentWillUnmount() {
AuthStore.removeChangeListener(this.onChange);
}
render(props, state) {
// if logged out, always force the login view:
if (!state.loggedIn) {
return <Login />;
}
return (
<Views view="home">
<Home name="home" />
<Other name="other" />
</Views>
);
}
}
class Home extends Component {
// switch to the "Other" view
goOther = () => {
this.context.route('other');
};
render() {
return (
<div>
<a onClick={this.goOther}>Other</a>
</div>
);
}
} Here's a working demo of the above setup (I just mocked out your Flux store for the demo): Edit: It's probably worth noting that you can wrap up the routing stuff into a /** <Link to="home">Home</Link> */
const Link = ({ to, ...props }, context) => (
<a onClick={ () => context.route(to) } {...props} />
); |
Thank you, I think this is exactly what I was looking for. If I wanted to change Components without making someone click, could I just call |
@donadley Yes, that is exactly how to change Components :) For the constructor - if you don't define a constructor in ES6,
So, in order to avoid having to remember that, I strongly encourage everyone to avoid using For an example, the following two classes are equivalent: class Foo extends Component {
constructor(props, context) {
super(props, context);
this.state = {
foo: this.props.foo
};
}
}
class Foo {
state = {
foo: this.props.foo
};
} You can verify this by comparing the resulting transpiled code. |
I'm going to close this one out since we solved the original question, but please feel free to chat 👍 |
Prefer ESM over CJS in package exports
I added a Component that changes the page depending on what is in the view property like the one below. When updateView is called it changes what is in the view.
The below class is updated and it shows whatever is in in the view.
The issue is that even though most of the other Components display, when someone log out the rendered JSX or even just a div doesn't display. At the beginning it work just fine. The console even logs that it is constructed and rendered after the update has occured, but nothing shows and there is not a div. Can you give an any reason why this is happening? Below are the rest of the classes just in case they may be useful.
The UserStore only gets the view from the page component.
The text was updated successfully, but these errors were encountered: