ฉันกำลังพยายามแสดงองค์ประกอบแบบไดนามิกตามประเภทของพวกเขา

ตัวอย่างเช่น:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; 
// Returns <examplecomponent />  instead of <ExampleComponent />

ฉันลองวิธีแก้ปัญหาที่เสนอที่นี่ชื่อส่วนประกอบแบบไดนามิก React / JSX

นั่นทำให้ฉันมีข้อผิดพลาดเมื่อรวบรวม (ใช้ browserify สำหรับอึก) มันคาดว่า XML ที่ฉันใช้ไวยากรณ์อาร์เรย์

ฉันสามารถแก้ปัญหานี้โดยการสร้างวิธีการสำหรับทุกองค์ประกอบ:

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

แต่นั่นจะหมายถึงวิธีการใหม่สำหรับทุกองค์ประกอบที่ฉันสร้าง จะต้องมีวิธีการแก้ปัญหาที่สง่างามกว่านี้

ฉันเปิดกว้างสำหรับคำแนะนำ

<MyComponent />คอมไพล์React.createElement(MyComponent, {})ซึ่งคาดว่าสตริง (แท็ก HTML) หรือฟังก์ชั่น (ReactClass) เป็นพารามิเตอร์แรก

คุณสามารถเก็บคลาสองค์ประกอบของคุณในตัวแปรด้วยชื่อที่ขึ้นต้นด้วยตัวอักษรตัวพิมพ์ใหญ่ ดูแท็ก VS React ส่วนประกอบ

var MyComponent = Components[type + "Component"];
return <MyComponent />;

รวบรวมเพื่อ

var MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});

มีเอกสารอย่างเป็นทางการเกี่ยวกับวิธีรับมือกับสถานการณ์ดังกล่าวที่นี่: https://facebook.github.io/react/docs/jsx-in-depth.html#choosing-the-type-at-runtime

โดยทั่วไปมันบอกว่า:

ไม่ถูกต้อง:

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} />;
}

แก้ไข:

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} />;
}

ควรมีคอนเทนเนอร์ที่แม็พชื่อคอมโพเนนต์กับคอมโพเนนต์ทั้งหมดที่ควรถูกใช้แบบไดนามิก คลาสคอมโพเนนต์ควรลงทะเบียนในคอนเทนเนอร์เนื่องจากในสภาพแวดล้อมแบบโมดูลาร์ไม่มีสถานที่เดียวที่สามารถเข้าถึงได้ ไม่สามารถระบุคลาสคอมโพเนนต์โดยชื่อโดยไม่ระบุอย่างชัดเจนเนื่องจากฟังก์ชันnameมีการย่อขนาดในการผลิต

ส่วนประกอบแผนที่

มันอาจเป็นวัตถุธรรมดา:

class Foo extends React.Component { ... }
...
const componentsMap = { Foo, Bar };
...
const componentName = 'Fo' + 'o';
const DynamicComponent = componentsMap[componentName];
<DynamicComponent/>;

หรือMapตัวอย่าง:

const componentsMap = new Map([[Foo, Foo], [Bar, Bar]]);
...
const DynamicComponent = componentsMap.get(componentName);

วัตถุธรรมดามีความเหมาะสมมากกว่าเพราะได้รับประโยชน์จากการจดชวเลข

โมดูล Barrel

โมดูลบาร์เรลกับการส่งออกชื่อสามารถทำหน้าที่เป็นแผนที่ดังกล่าว

// 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/>;

ใช้งานได้ดีกับหนึ่งคลาสต่อสไตล์โค้ดของโมดูล

มัณฑนากร

มัณฑนากรสามารถใช้กับส่วนประกอบของคลาสสำหรับน้ำตาล syntactic นี้ยังคงต้องระบุชื่อคลาสอย่างชัดเจนและลงทะเบียนในแผนที่:

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'
  ...
}

มัณฑนากรสามารถใช้เป็นส่วนประกอบลำดับสูงกว่าด้วยองค์ประกอบการทำงาน:

const Bar = props => ...;
Bar.displayName = 'Bar';

export default dynamic(Bar);

การใช้ที่ไม่ได้มาตรฐานdisplayNameแทนที่จะเป็นคุณสมบัติแบบสุ่มก็มีประโยชน์ในการดีบักเช่นกัน

ฉันหาทางออกใหม่ โปรดทราบว่าฉันกำลังใช้โมดูล ES6 ดังนั้นฉันต้องการชั้นเรียน คุณสามารถกำหนดคลาส React ใหม่แทนได้

var components = {
    example: React.createFactory( require('./ExampleComponent') )
};

var type = "example";

newComponent() {
    return components[type]({ attribute: "value" });
}

หากองค์ประกอบของคุณเป็นสากลคุณสามารถทำได้:

var nameOfComponent = "SomeComponent";
React.createElement(window[nameOfComponent], {});

สำหรับส่วนประกอบของ wrapper คำตอบง่ายๆคือใช้React.createElementโดยตรง (โดยใช้ 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 })
    )
  }
}

จากตัวเลือกทั้งหมดที่มีแผนที่องค์ประกอบฉันไม่พบวิธีที่ง่ายที่สุดในการกำหนดแผนที่โดยใช้ไวยากรณ์แบบสั้น ES6:

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/>
}

การมีแผนที่ไม่ได้ดูดีเลยด้วยส่วนประกอบจำนวนมาก ฉันแปลกใจจริงๆที่ไม่มีใครแนะนำอะไรเช่นนี้:

var componentName = "StringThatContainsComponentName";
const importedComponentModule = require("path/to/component/" + componentName).default;
return React.createElement(importedComponentModule); 

อันนี้ช่วยฉันได้จริงเมื่อฉันต้องการแสดงส่วนประกอบจำนวนมากที่โหลดในรูปแบบของอาร์เรย์ json

ระงับเราต้องการเข้าถึงมุมมองต่างๆด้วยการโหลดคอมโพเนนต์แบบไดนามิกรหัสต่อไปนี้เป็นตัวอย่างการทำงานของวิธีการทำสิ่งนี้ให้สำเร็จโดยใช้สตริงที่แยกวิเคราะห์จากสตริงการค้นหาของ URL

สมมติว่าเราต้องการเข้าถึงหน้า 'snozberrys' ด้วยมุมมองที่ไม่ซ้ำกันสองรายการโดยใช้เส้นทาง URL เหล่านี้:

'http://localhost:3000/snozberrys?aComponent'

และ

'http://localhost:3000/snozberrys?bComponent'

เรากำหนดตัวควบคุมมุมมองของเราดังนี้:

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'));

สมมติว่าเรามีflag, ไม่แตกต่างจากstateหรือprops:

import ComponentOne from './ComponentOne';
import ComponentTwo from './ComponentTwo';

~~~

const Compo = flag ? ComponentOne : ComponentTwo;

~~~

<Compo someProp={someValue} />

ด้วยการCompoเติมค่าสถานะด้วยหนึ่งComponentOneหรือComponentTwoจากนั้นCompoสามารถทำหน้าที่เหมือนองค์ประกอบการตอบสนอง

ฉันใช้วิธีการที่แตกต่างกันเล็กน้อยเนื่องจากเรารู้ส่วนประกอบที่แท้จริงของเราอยู่เสมอดังนั้นฉันจึงคิดที่จะใช้ตัวเรือนสวิตช์ ในกรณีของฉันยังไม่มีส่วนประกอบทั้งหมดอยู่ที่ 7-8

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} />

    }
  }

แก้ไข: คำตอบอื่น ๆ ดีกว่าดูความคิดเห็น

ฉันแก้ไขปัญหาเดียวกันด้วยวิธีนี้:

...
render : function () {
  var componentToRender = 'component1Name';
  var componentLookup = {
    component1Name : (<Component1 />),
    component2Name : (<Component2 />),
    ...
  };
  return (<div>
    {componentLookup[componentToRender]}
  </div>);
}
...