React / JSX Name der dynamischen Komponente

Ich versuche, dynamisch zu Rendern-Komponenten, die basierend auf Ihrem Typ.

Beispiel:

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

Habe ich versucht, den hier vorgeschlagenen Lösung Reagieren/JSX dynamische Komponente-Namen

Dass mir ein Fehler beim kompilieren (mit browserify für gulp). Es erwartet XML, wo ich war, mit einem array-syntax.

Konnte ich dies lösen, indem Sie die Schaffung einer Methode für jede Komponente:

newExampleComponent() {
    return <ExampleComponent />;
}

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

Aber das würde bedeuten, dass eine neue Methode für jede Komponente, die ich erstellen. Es muss eine elegantere Lösung für dieses problem.

Bin ich sehr offen für Vorschläge.

InformationsquelleAutor der Frage Sam | 2015-04-26

  1. 103

    <MyComponent /> kompiliert React.createElement(MyComponent, {})was erwartet einen string (HTML-tag) oder eine Funktion (ReactClass) als ersten parameter.

    Sie könnten nur speichern Ihrer Komponenten-Klasse in eine variable mit einem Namen beginnt mit einem Großbuchstaben. Sehen HTML-tags Reagieren vs-Komponenten.

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

    kompiliert

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

    InformationsquelleAutor der Antwort Alexandre Kirszenberg

  2. 71

    Gibt es eine offizielle Dokumentation über den Umgang mit solchen Situationen ist hier erhältlich: https://facebook.github.io/react/docs/jsx-in-depth.html#choosing-the-type-at-runtime

    Grundsätzlich heißt es:

    Falsch:

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

    Richtig:

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

    InformationsquelleAutor der Antwort gmfvpereira

  3. 10

    Dachte ich, eine neue Lösung zu finden. Bitte beachten Sie, dass ich mit ES6-Module, so bin ich dass der Klasse. Sie konnte auch Reagieren, definieren Sie eine neue Klasse, statt.

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

var type = "example";

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

    InformationsquelleAutor der Antwort Sam

  4. 2

    Für eine wrapper-Komponente, eine einfache Lösung wäre, nur verwenden React.createElement direkt (über 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 })
    )
  }
}

    InformationsquelleAutor der Antwort Ricardo Pedroni

  5. 0

    Ich ein bisschen anderer Ansatz, als wissen wir immer unsere aktuellen Komponenten, so dachte ich gelten switch case.
    Auch insgesamt keine der Komponenten waren etwa 7-8 in meinem Fall.

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

    }
  }

    InformationsquelleAutor der Antwort abhirathore2006

  6. 0

    Suspose wir wollen den Zugriff auf die verschiedenen Ansichten, die mit der dynamischen Komponente laden.Der folgende code gibt ein Beispiel, wie dies zu erreichen, indem eine string geparst wird aus dem such-string einer url.

    Nehmen wir an, wir möchten eine Seite zuzugreifen, die 'snozberrys' mit zwei einzigartigen Blick über diese url-Pfade:

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

    und

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

    definieren wir unsere view-controller wie diesem:

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

    InformationsquelleAutor der Antwort 1-14x0r

  7. -1

    Edit: die Anderen Antworten sind besser, siehe Kommentare.

    Gelöst ich das gleiche problem auf diese Weise:

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

    InformationsquelleAutor der Antwort Hammad Akhwand

Schreibe einen Kommentar