Tôi đang cố gắng tự động kết xuất các thành phần dựa trên loại của chúng.

Ví dụ:

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

Tôi đã thử giải pháp được đề xuất ở đây Tên thành phần động React / JSX

Điều đó đã cho tôi một lỗi khi biên dịch (sử dụng browserify cho gulp). Nó mong đợi XML nơi tôi đang sử dụng một cú pháp mảng.

Tôi có thể giải quyết điều này bằng cách tạo một phương thức cho mọi thành phần:

newExampleComponent() {
    return <ExampleComponent />;
}

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

Nhưng điều đó có nghĩa là một phương thức mới cho mọi thành phần tôi tạo ra. Phải có một giải pháp thanh lịch hơn cho vấn đề này.

Tôi rất cởi mở để đề xuất.

<MyComponent />biên dịch thành React.createElement(MyComponent, {}), dự kiến ​​một chuỗi (thẻ HTML) hoặc hàm (ReactClass) làm tham số đầu tiên.

Bạn chỉ có thể lưu trữ lớp thành phần của mình trong một biến có tên bắt đầu bằng chữ in hoa. Xem các thẻ HTML so với các thành phần React .

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

biên dịch thành

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

Có một tài liệu chính thức về cách xử lý các tình huống như vậy có sẵn tại đây: https://facebook.github.io/react/docs/jsx-in-depth.html#ch rủi-the-type-at-r nb

Về cơ bản nó nói:

Sai lầm:

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

Chính xác:

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

Cần có một thùng chứa ánh xạ tên thành phần cho tất cả các thành phần được cho là được sử dụng động. Các lớp thành phần nên được đăng ký trong một thùng chứa bởi vì trong môi trường mô đun, nếu không thì không thể truy cập một nơi duy nhất. Các lớp thành phần không thể được xác định bằng tên của chúng mà không chỉ định rõ ràng vì hàm nameđược thu nhỏ trong sản xuất.

Bản đồ thành phần

Nó có thể là đối tượng đơn giản:

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

Hoặc Mapví dụ:

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

Đối tượng đơn giản là phù hợp hơn vì nó được hưởng lợi từ tốc ký tài sản.

Mô-đun thùng

Một mô-đun thùng với xuất khẩu được đặt tên có thể hoạt động như bản đồ:

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

Điều này hoạt động tốt với một lớp cho mỗi kiểu mã mô-đun.

Người trang trí

Trình trang trí có thể được sử dụng với các thành phần lớp cho đường cú pháp, điều này vẫn yêu cầu xác định rõ ràng tên lớp và đăng ký chúng trong bản đồ:

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

Một bộ trang trí có thể được sử dụng như một thành phần bậc cao hơn với các thành phần chức năng:

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

export default dynamic(Bar);

Việc sử dụng phi tiêu chuẩndisplayName thay vì thuộc tính ngẫu nhiên cũng có lợi cho việc gỡ lỗi.

Tôi đã tìm ra một giải pháp mới. Xin lưu ý rằng tôi đang sử dụng các mô-đun ES6 vì vậy tôi đang yêu cầu lớp học. Bạn cũng có thể định nghĩa một lớp React mới thay thế.

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

var type = "example";

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

Nếu các thành phần của bạn là toàn cầu, bạn chỉ cần làm:

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

Đối với một thành phần bao bọc, một giải pháp đơn giản sẽ chỉ là sử dụng React.createElementtrực tiếp (sử dụng 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 })
    )
  }
}

Trên tất cả các tùy chọn với bản đồ thành phần Tôi chưa tìm thấy cách đơn giản nhất để xác định bản đồ bằng cú pháp ngắn 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/>
}

Có một bản đồ trông không đẹp chút nào với một lượng lớn các thành phần. Tôi thực sự ngạc nhiên khi không ai đề xuất một cái gì đó như thế này:

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

Điều này đã thực sự giúp tôi khi tôi cần kết xuất một số lượng lớn các thành phần được tải dưới dạng mảng json.

Có nghĩa là chúng tôi muốn truy cập các chế độ xem khác nhau với tải thành phần động. Đoạn mã sau đây đưa ra một ví dụ hoạt động về cách thực hiện điều này bằng cách sử dụng một chuỗi được phân tích cú pháp từ chuỗi tìm kiếm của url.

Giả sử chúng tôi muốn truy cập một trang 'snozberry' với hai chế độ xem duy nhất bằng các đường dẫn url này:

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

và

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

chúng tôi xác định bộ điều khiển xem của chúng tôi như thế này:

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

Giả sử chúng ta có a flag, không khác với statehoặc props:

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

~~~

const Compo = flag ? ComponentOne : ComponentTwo;

~~~

<Compo someProp={someValue} />

Với cờ Compođiền với một ComponentOnehoặc ComponentTwosau đó Compocó thể hoạt động như một Thành phần Phản ứng.

Tôi đã sử dụng một chút Cách tiếp cận khác nhau, vì chúng tôi luôn biết các thành phần thực tế của mình vì vậy tôi nghĩ sẽ áp dụng trường hợp chuyển đổi. Ngoài ra tổng số không có thành phần là khoảng 7-8 trong trường hợp của tôi.

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

    }
  }

Chỉnh sửa: Các câu trả lời khác là tốt hơn, xem ý kiến.

Tôi đã giải quyết vấn đề tương tự theo cách này:

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