Is it possible to render a Blazor component dynamically next to App component? It may be crazy, but I have a requirement where I have to render a component dynamically next to the top of the Blazor App or body element.
<app>
// Here my Blazor component needs to be rendered dynamically.
// Rest of the other components rendering in a regular manner.
</app>
I am assuming when you say dynamically means you have different components to render in different scenarios. If this is the requirement then you can use if else conditions. You can use variables which represents your scenario#(s) in if condition.
Example:
<app>
#if(scenario#1){
<Component1/>
}
else if (scenario#2)
{
<Component2/>
}
else{
<Component3/>
}
</app>
Related
I am developing a webapp using quasar and there I used AmCharts with Axios for the API.
When data is received from the API, 5~6 charts are then rendered on the page.
The problem is there is a significant delay until the charts to be displayed after the component mounted.
I'd like to show a loading spinner during this time.
How should I detect all components are finished rendering?
Or is there some other way around for me to overcome this problem?
nextTick() is called when the DOM is fully updated (that means, components are rendered again).
You could try this in your charts component, a watcher that checks when the API is fetched, provided you already have a loader component that shows only if a show variable is set to true:
watch:{
values(newVal){
this.nextTick().then(()=>{
this.show= true;
});
}
}
I'm new to React, and I'm trying to figure out some basics. In other template engines such as EJS or Jade, you are able to pass in a context variable when you are rendering the view file in your routes/controller file. However, I have not found any way to do this with React/jsx. I should note that I am working with Express.
I am actually uncertain if jsx is a view engine, or if React somehow was one built in. In either case, I do not know how to pass context from the server to the view file.
For example, if I wanted to load profile information (that is stored on the server/backend), how would I pass that to my front end jsx view file in React/jsx?
that's simple. There is a mess in MVC terminology, but I think it would be okay to say that React component is not just the "View", but "View + Controller".
As a direct analogy to the templating engines, component's render() function is your template. And component.state (which is local to the component) and component.props (arguments received from the upper component) both can be used as a "context".
If you want some really close analogy to the React component in the conservative part of the JS world, it's Backbone's View (which is again the view + controller if we use original MVC terminology; as I told - it's a mess). Conceptually, it's the same thing. JSX is used in render() instead of EJS (or whatever), that's it.
Btw, React's context concept is something different. Think of it as
props which are visible to the whole component subtree starting from
the component where the context is exposed.
For example, if I wanted to load profile information (that is stored on the server/backend), how would I pass that to my front end jsx view file in React/jsx?
In the simplest case, you create the top-level React component, which would load the stuff you need on mount (componentWillMount()), put it to its local state when you'll receive the response from server (this.setState(...)), and pass elements of its state (this.state) down to the subcomponents as props (<List items={ this.state.items } />) in its render() function.
Whenever state is modified with this.setState(...), the whole component subtree will render again. That's how it works. In the simplest case.
I'm quite new to react and trying to wrap my head around the semantics.
I am building a map based application and the primary parts of the site are the map, the navbar and a search menu which pops up over the map and allows you to select a search which is populated from an ajax request.
Here are some questions which come to mind:
Where should I complete my ajax requests, should that all be contained in the map component? If so, how do I pass the parameters for the request, if the answer is pass it to a function in map then how do I call the function from inside my search menu component?
My app is currently organised like so:
export default class App extends React.Component {
toggleSearchMenu() {
this.refs.searchMenu.toggleVisible();
}
render() {
return (
<div className="pure-g">
<Nav>
<NavButton onClick={() => this.toggleSearchMenu()}>Searches</NavButton>
</Nav>
<Map lat="53.15" lng="-0.5" zoom="9" />
<SearchMenu ref="searchMenu" />
</div>
);
}
}
As you can see, I have resulted to showing and hiding the menu from a function within my app component which doesn't feel right somehow?
As you know, React is only responsible for rendering the views, but it doesn't define how to structure the actual logic of your app. Facebook suggests to use the Flux architecture for that. This site and video should get you on the right track: https://facebook.github.io/react/blog/2014/05/06/flux.html
Basically, you want all actions to enter the same "pipeline", no matter where they come from. Logic and some state is kept in "stores" (sort of a hybrid between a Model and a Controller) and finally components listen to changes in those stores and then re-render themselves.
I'm writing an Express 4 app, and am currently using twig.js as the view engine since I find it comfortable, though I could be persuaded to change this engine.
I've done a lot of development with PHP/Laravel and have gotten used to what in that camp they call view composers. Using these I can write a composer for a particular view, whether it's a main page view, a layout which other views extend, or a partial other views include. The composer does any necessary logic to prepare whatever data the view needs, and then attaches it to the view's context so it's available during rendering.
For example, I might have a partial which shows the current user status, so if they're logged out it'll maybe have just a log in button, and if they're logged in it'll have their icon, username, and a menu to let them log out etc. The corresponding composer would check to see if a user is logged in, and if so attach the relevant data about the user to the view's context. It then doesn't matter which page includes this partial; the data will always be available without me having to remember to add that specific data to the context passed to the page's main view.
Is there some equivalent in Express? Or does it depend on the template engine I'm using?
Currently, views that are rendered using res.render() need to have their data passed in on every res.render(). If the view uses a partial template that requires certain data points, the view that uses that template will need to have that value passed in through res.render(). So in short, you always need to pass the data in regardless if the data point is required by a partial template that might be shared. When using view engines, nothing is automatically provided to the view.
Are you asking if it's possible to have some view A, that includes partial P_A and be able to pass some data to the partial that's not dependent on routing, i.e wherever you are on the site / app your partial has data bound to it (totally independent of both the route / url and view ) which you could use for your logged in status ?
if so then create your partial, let's use a navigation / menu partial:
please note that this example uses ejs for templating
<nav>
<ul>
<!-- pass the data upon call / include-->
<% for(var i = 0, len=navigation.length;i < len;i++) {%>
<li><%=navigation[i].Text%></li>
<%}%>
</ul>
</nav>
Call / Include your patial on a view
view.ejs
<%- include('nav', { navigation : [{Text : 'Items' ,href : '/' },{Text : 'People' ,href : '/names' }] } )%>
To my knowledge there is nothing like that in expressjs.
I know we should use unit tests for our reactjs components. But what I also want, is some way to manually test our components in isolation. Because we are working on small sprints in which we must deliver some finished component before having the page that first uses that component. And I want to see that full component really working (i.e. test integration with css and sub-components).
So to start with, I would like to see that new component rendered in black page that doesn't require that component directly, but to take that component name/path from a query-string parameter. And then I plan to add to that page some generic component configuration (e.g. a textbox with json representing the props to pass to that component).
The first problem I'm facing now is about how to configure webpack, webpack-dev-middleware, or webpack-dev-server to be able to load a component passed by parameter.
Anyone know how to that? Or a better way to handle this?
I would try something like this:
Set up an entry point that uses require.context.
Invoke require within that context based on your querystring. You should have you React component now. Render that through React.
In order to generate the test controls I would include the meta within the component using JSON Schema. The form controls could be then generated using some form generator such as plexus-form or tcomb-form.