gibt es eine Möglichkeit, Vorlagen in Reaktion zu haben

Question

Ich habe ein Element, das Art der Vorlage ist gebaut. (z. B. Thumbnail-Container mit Bild oben und etwas in der Fußzeile mit dynamischem Inhalt zwischen ihnen) der dynamische Inhalt kann verschiedene Arten von DOM-Elementen sein, basierend auf dem Status. Ich habe es mit dem Hinzufügen von Logik in der Render-Methode, die den dynamischen Teil "injiziert". Macht das Sinn (mit Logik in der Render-Methode, die verschiedene react-Komponenten zurückgibt)? Gibt es einen besseren Weg zum Templating? (Ich bin nicht für Projekte suchen, die diese Fähigkeit hinzufügen, wollte wissen, ob es eine „reagieren Art und Weise“, so zu tun Dank

edit:.! Hier ist der Code, den ich bezog sich auf (Coffee):

internalContent: -> 
    switch @props.title 
    when "title1" then SomeReactFactory(props) 
    when "title2" then SomeOtherReactFactory(props) 

render -> 
    ... 
    DOM.div 
    className: 'panel' 
    @internalContent() 

die internalContent() Methode dynamisch fügt einige Komponenten Reagieren auf der Basis der Stütze

Answer 1

Dies ist die Art und Weise .. Reagieren ist Und Sie sollten davon Gebrauch machen, spezifische Domain zu zielen.

zum Beispiel ein Knopf in Reagieren coul d wie folgt geschrieben werden:

const MyButton = ({ text, type = "normal", color = "blue", onClick }) => { 
    return (
     <button 
     onClick={onClick} 
     style={{backgroundColor: color }} 
     className={"my-button my-button--type" + type}> 
      {text} 
    </button>); 
}; 

Oder eine Layout-Komponente:

const MyLayout = ({side, nav, main}) => { 
    return (
     <div className="container"> 
     <nav>{nave}</nav> 
     <aside>{side}</aside> 
     <div className="main">{main}</div> 
     </div> 
    ) 
} 

Jetzt können Sie Verbund es zum Beispiel wie folgt aus:

class App extends Component { 
    ... 

    render() { 
    <MyLayout 
     nav={<MyNav/>} 
     side={<MySideBar items={...} />} 
     main={<MyButton onClick={this.onClick} text="Main Button"} 
    /> 
    } 
} 

Dont versuchen, alles in einem großen zu packen Eine Komponente, die alles macht. Der Trick in React besteht darin, kleine wiederverwendbare Komponenten zu erstellen und sie zu kombinieren.

Sie können auch eine Reihe von Komponenten erstellen, die Sie in vielen Projekten verwenden können.