从条件语句渲染多个 React 组件

Question

I have a definition object where depending on the 'type' of each form, I render a specific component. For example:

const definition = 
{
name: "test", 
id: 1,
form: [
  {type: "text"}, 
  {type: "checkbox"}, 
  {type: "radio"}]
};

So to access the form types Im just doing a simple map:

const definitionTypes = definitions.form.map ( form => form.type )

I now have an array of all the form type's entries stored on definitionTypes and I have three components that needs to render depending on which keyword is in that definitionTypes array. So for the “text” I have a component that Im importing called <DefinitionText /> , etc.

Where Im am experiencing problems is figuring out a solution to return multiple components based on the types that are in the definitionTypes array. The end goal would be for these 3 components to render from that array:

  // if definitionTypes includes "text" then render...
  <DefinitionText />

  // also if definitionTypes includes "checkbox" then render...
  <DefinitionCheckbox />

  // also if definitionTypes includes "radio" then render...
  <DefinitionRadio />

I've tried using an if/else statement to push each component to a results variable then rendering that but the results variable sends back an error. Any help in getting multiple components to render based off conditions would be a huge help!

Answer 1

Having that defintionTypes array, the rest should be kinda straightforward... You could use a switch statement for example. Check out the snippet.

 function Radio(){ return <input type='radio'></input> } function Text(){ return <input type='text'></input> } function CheckBox(){ return <input type='checkBox'></input> } function App(){ const definitionTypes = ['text', 'checkBox', 'radio'] return <div> {definitionTypes.map(type => { switch(type){ case 'text': return <Text/> break case 'radio': return <Radio/> break case 'checkBox': return <CheckBox/> break default: break }})} </div> } ReactDOM.render(<App/>, document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <div id='root'></div>

Answer 2

Firstly build an object map of your components:

const Components = {
  foo: Foo,
  bar: Bar
};

Then access using the string for key name:

const DynamicComponent = Components[componentName];

<DynamicComponent />

Quick example using your map within a component

{definitions.form.map( form => {
  const DynamicComponent = Components[form.type];
  return <DynamicComponent />
})}