есть способ иметь шаблоны в реакции

Question

Я создал элемент, который является своего рода шаблоном. (например, миниатюрный контейнер с изображением вверху и что-то в нижнем колонтитуле с динамическим содержимым между ними) динамическим контентом могут быть разные типы элементов DOM, основанные на состоянии. Я сделал это с добавлением логики в методе визуализации, который «вводит» динамическую часть. Имеет ли это смысл (с логикой в ​​методе рендеринга, который возвращает разные реагирующие компоненты)? Есть ли лучший способ для шаблонов? (Я не смотрю на проекты, которые добавляют эту возможность, хотел бы знать, если есть «реагировать путь», чтобы сделать это Благодаря

редактировать:.! Вот код, который я имел в виду (CoffeeScript):

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

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

метод internalContent() динамически добавлять некоторые Реагировать компонент на основе опоры

Answer 1

Это Реагировать путь .. И вы должны использовать его, чтобы ориентировать конкретный домен.

Например, Button в Реакция кулака d записывается следующим образом:

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

Или компонент макета:

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

Теперь вы можете композит это, например, так:

class App extends Component { 
    ... 

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

Dont пытаются упаковать все в большой Компонент, который будет делать все, трюк в Реактике - сделать небольшие повторно используемые Компоненты и объединить их.

Вы также можете создать кучу компонентов, которые вы можете использовать во многих проектах.