score:246
<MyComponent />
compiles to React.createElement(MyComponent, {})
, which expects a string (HTML tag) or a function (ReactClass) as first parameter.
You could just store your component class in a variable with a name that starts with an uppercase letter. See HTML tags vs React Components.
var MyComponent = Components[type + "Component"];
return <MyComponent />;
compiles to
var MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});
score:-2
I used a bit different Approach, as we always know our actual components so i thought to apply switch case. Also total no of component were around 7-8 in my case.
getSubComponent(name) {
let customProps = {
"prop1" :"",
"prop2":"",
"prop3":"",
"prop4":""
}
switch (name) {
case "Component1": return <Component1 {...this.props} {...customProps} />
case "Component2": return <Component2 {...this.props} {...customProps} />
case "component3": return <component3 {...this.props} {...customProps} />
}
}
score:-2
Edit: Other answers are better, see comments.
I solved the same problem this way:
...
render : function () {
var componentToRender = 'component1Name';
var componentLookup = {
component1Name : (<Component1 />),
component2Name : (<Component2 />),
...
};
return (<div>
{componentLookup[componentToRender]}
</div>);
}
...
score:0
Suspose we wish to access various views with dynamic component loading.The following code gives a working example of how to accomplish this by using a string parsed from the search string of a url.
Lets assume we want to access a page 'snozberrys' with two unique views using these url paths:
'http://localhost:3000/snozberrys?aComponent'
and
'http://localhost:3000/snozberrys?bComponent'
we define our view's controller like this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import {
BrowserRouter as Router,
Route
} from 'react-router-dom'
import AComponent from './AComponent.js';
import CoBComponent sole from './BComponent.js';
const views = {
aComponent: <AComponent />,
console: <BComponent />
}
const View = (props) => {
let name = props.location.search.substr(1);
let view = views[name];
if(view == null) throw "View '" + name + "' is undefined";
return view;
}
class ViewManager extends Component {
render() {
return (
<Router>
<div>
<Route path='/' component={View}/>
</div>
</Router>
);
}
}
export default ViewManager
ReactDOM.render(<ViewManager />, document.getElementById('root'));
score:0
Assuming you are able to export * from components like so...
// src/components/index.js
export * from './Home'
export * from './Settings'
export * from './SiteList'
You can then re-import * into a new comps object, which can then be used to access your modules.
// src/components/DynamicLoader.js
import React from 'react'
import * as comps from 'components'
export default function ({component, defaultProps}) {
const DynamicComponent = comps[component]
return <DynamicComponent {...defaultProps} />
}
Just pass in a string value that identifies which component you want to paint, wherever you need to paint it.
<DynamicLoader component='Home' defaultProps={someProps} />
score:2
Assume we have a flag
, no different from the state
or props
:
import ComponentOne from './ComponentOne';
import ComponentTwo from './ComponentTwo';
~~~
const Compo = flag ? ComponentOne : ComponentTwo;
~~~
<Compo someProp={someValue} />
With flag Compo
fill with one of ComponentOne
or ComponentTwo
and then the Compo
can act like a React Component.
score:4
Having a map doesn't look good at all with a large amount of components. I'm actually surprised that no one has suggested something like this:
var componentName = "StringThatContainsComponentName";
const importedComponentModule = require("path/to/component/" + componentName).default;
return React.createElement(importedComponentModule);
This one has really helped me when I needed to render a pretty large amount of components loaded in a form of json array.
score:7
With the introduction of React.lazy, we can now use a true dynamic approach to import the component and render it.
import React, { lazy, Suspense } from 'react';
const App = ({ componentName, ...props }) => {
const DynamicComponent = lazy(() => import(`./${componentName}`));
return (
<Suspense fallback={<div>Loading...</div>}>
<DynamicComponent {...props} />
</Suspense>
);
};
This approach makes some assumptions about the file hierarchy of course and can make the code easy to break.
score:9
If your components are global you can simply do:
var nameOfComponent = "SomeComponent";
React.createElement(window[nameOfComponent], {});
score:9
For a wrapper component, a simple solution would be to just use React.createElement
directly (using ES6).
import RaisedButton from 'mui/RaisedButton'
import FlatButton from 'mui/FlatButton'
import IconButton from 'mui/IconButton'
class Button extends React.Component {
render() {
const { type, ...props } = this.props
let button = null
switch (type) {
case 'flat': button = FlatButton
break
case 'icon': button = IconButton
break
default: button = RaisedButton
break
}
return (
React.createElement(button, { ...props, disableTouchRipple: true, disableFocusRipple: true })
)
}
}
score:9
Across all options with component maps I haven't found the simplest way to define the map using ES6 short syntax:
import React from 'react'
import { PhotoStory, VideoStory } from './stories'
const components = {
PhotoStory,
VideoStory,
}
function Story(props) {
//given that props.story contains 'PhotoStory' or 'VideoStory'
const SpecificStory = components[props.story]
return <SpecificStory/>
}
score:11
I figured out a new solution. Do note that I am using ES6 modules so I am requiring the class. You could also define a new React class instead.
var components = {
example: React.createFactory( require('./ExampleComponent') )
};
var type = "example";
newComponent() {
return components[type]({ attribute: "value" });
}
score:27
There should be a container that maps component names to all components that are supposed to be used dynamically. Component classes should be registered in a container because in modular environment there's otherwise no single place where they could be accessed. Component classes cannot be identified by their names without specifying them explicitly because function name
is minified in production.
Component map
It can be plain object:
class Foo extends React.Component { ... }
...
const componentsMap = { Foo, Bar };
...
const componentName = 'Fo' + 'o';
const DynamicComponent = componentsMap[componentName];
<DynamicComponent/>;
Or Map
instance:
const componentsMap = new Map([[Foo, Foo], [Bar, Bar]]);
...
const DynamicComponent = componentsMap.get(componentName);
Plain object is more suitable because it benefits from property shorthand.
Barrel module
A barrel module with named exports can act as such map:
// Foo.js
export class Foo extends React.Component { ... }
// dynamic-components.js
export * from './Foo';
export * from './Bar';
// some module that uses dynamic component
import * as componentsMap from './dynamic-components';
const componentName = 'Fo' + 'o';
const DynamicComponent = componentsMap[componentName];
<DynamicComponent/>;
This works well with one class per module code style.
Decorator
Decorators can be used with class components for syntactic sugar, this still requires to specify class names explicitly and register them in a map:
const componentsMap = {};
function dynamic(Component) {
if (!Component.displayName)
throw new Error('no name');
componentsMap[Component.displayName] = Component;
return Component;
}
...
@dynamic
class Foo extends React.Component {
static displayName = 'Foo'
...
}
A decorator can be used as higher-order component with functional components:
const Bar = props => ...;
Bar.displayName = 'Bar';
export default dynamic(Bar);
The use of non-standard displayName
instead of random property also benefits debugging.
score:213
There is an official documentation about how to handle such situations is available here: https://facebook.github.io/react/docs/jsx-in-depth.html#choosing-the-type-at-runtime
Basically it says:
Wrong:
import React from 'react';
import { PhotoStory, VideoStory } from './stories';
const components = {
photo: PhotoStory,
video: VideoStory
};
function Story(props) {
// Wrong! JSX type can't be an expression.
return <components[props.storyType] story={props.story} />;
}
Correct:
import React from 'react';
import { PhotoStory, VideoStory } from './stories';
const components = {
photo: PhotoStory,
video: VideoStory
};
function Story(props) {
// Correct! JSX type can be a capitalized variable.
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;
}
Source: stackoverflow.com
Related Query
- React / JSX Dynamic Component Name
- Dynamic tag name in React JSX
- React include dynamic prop value in component name
- React Component with Dynamic Tag Name Not Rendered
- Dynamic component name - React
- dynamic routing in react js, component name from a string cannot be assigned in route
- Conditionally pass a Boolean prop with a dynamic prop name to a React component
- Dynamic Component Name with props react
- Pass prop that has a dynamic name in react to child component
- How to change React component tag to jsx tag name with condition properly?
- Get component name in React
- Dynamic href tag React in JSX
- Dynamic Opacity not changing when component rerenders in react native
- React.js without JSX - "Warning: Something is calling a React component directly. Use a factory or JSX instead"
- dynamic HTML String to react component
- Do I have to save react component files with a jsx extension
- React props: Using an HTML entity within JSX dynamic content?
- Dynamic tabIndex attribute in JSX + React
- Selectively rendering optional component properties in React JSX
- React render component using its name
- React JSX vs function call to present component
- how to access vairables outside of map function in js and jsx in a React component
- Using JS React component in TypeScript: JSX element type 'MyComponent' is not a constructor function for JSX elements
- Render a React component based on its name
- Dynamic import in react not working when trying to import a component in another directory
- Component name with React hooks in DevTools
- How to get parent component name in React function component
- Styled Component dynamic tag name
- how to get current react component name inside custom react hook?
- React Access parent component name
More Query from same tag
- CSS animation on changing list order with React
- How to call an action from inside an options object?
- ReactJS send key(index) on click
- React.js - babel-loader - Unexpected token
- ReactJS: Get multiple checkboxes value with material-ui
- React hooks - setState does not update state properties
- How to validate email and password using react hooks?
- Warning: React component classes must extend React.Component when using ScalaJS
- Good practices for using the same form components for both create and edit pages
- File input validation using React Hook Form and Yup
- I want to get 3 random data (different from each other) using UseSelector/userReducer but I can't access the data
- Uncaught (in promise) Error: Request failed with status code 400
- How to store multiple data in drop down react js
- Saga from redux-saga is being ignored, only the reducer is used
- Return undefined on Array.map
- Calculate how many days until an event, based on a recurring date and recurrence
- React change state automatically after a post has been added on other component
- Responsive NavBar like StackOverflow
- Is there a way to make setState synchronous to solve render issue?
- Unable to update state (collection of objects with keys and values) of a react component
- Filter is not a function using React UseEffect of a data from MongoDB
- BrowseRouter MIME type error
- addEventListener is not being applied
- What are the pros and cons of using a single action to modify multiple values, or an action for each value? Why?
- how to communicate qt with react in tsx?
- change state based on scroll position on ie
- Using react Hook, shows missing dependency in case of useCallback
- Download image using Axios in React?
- How to use fetch and call rest api
- IE array.flat() Object doesn't support property or method 'flat'