Уменьшить дублированный код шаблона в React

Question

Я совершенно новый, чтобы реагировать, и я не знаю, есть ли шаблон для сокращения дублированного кода. Я знаю компоненты более высокого порядка, но я не уверен, как они могут помочь мне. Вот вопрос, который я имею:

Вот сценарий:

У меня есть три Реагировать компоненты в моем приложении: Студии, Проекты, Актеры

Каждый компонент соответствует маршруту на передней панели -End:

• /проекты: Projects
• /студии: Studios
• /актеры: Actors

Каждый компонент делает почти то же самое, зацикливание по элементам и визуализации компонента:

• Проекты: Переберите данных для проектов и визуализации Project компонент для каждого проекта

• Studios: Переберите данные для студий и визуализации Studio компонента для каждой студии

• Актеры: Переберите данных для актеров и вынести Actor компонент для каждого актера

Теперь модель для Project, Studio и Actor в значительной степени то же самое с небольшим изменением:

• Studio: изображение, название, детали
• Actor: изображения, имя и био
• Project: изображение, название, и descri ption

Кроме того, в представлении «Список», когда я нажимаю на элемент, он принимает меня к деталям этого элемента. Например, когда я нахожусь на изображении /projects, когда я нажимаю на элемент проекта, он принимает меня до /projects/:id и отображает компонент ProjectDetail. Таким образом, к настоящему моменту для каждого объекта у меня есть три компонента: ItemList, Item, ItemDetail. Которая составляет 3 x 3 = 9 компонентов. Я чувствую, что есть лучший способ сделать это. Может быть, я не понимаю ответственности маршрутизатора?Прямо сейчас, у меня есть маршрут для ItemList и ItemDetail для каждого объекта:

• /проекты: Projects
• /Проекты /: ID: ProjectDetail

---

• /актеры: Actors
• /actors/id: ActorDetail

---

• /студия: Studios
• /студии /: ID: StudioDetail

В конце концов, я хотел бы обобщить модели, которые очень похожи друг на друга, чтобы уменьшить шаблонный код. Возможно:

• ItemList: data бы в качестве входных данных и визуализации соответствующего Item компонента.
• Item: Компонент, который будет отображаться на ItemList
• ItemDetail: Компоненте, который показывает деталь Item

и общий клиент правило маршрута, который может автоматически сопоставить маршрут к соответствующей компоненте ,

Answer 1

Я собираюсь обратиться к компонентам vs экземпляров в моем ответе; выпишите this article для объяснения различий или прочитайте это TL; DR: компонент является классом или функцией , который определяет поведение тега JSX, в то время как экземпляр обычно представлен JSX в методе render. Таким образом, function Foo() { return <div />;} будет компонентом, а <Foo /> будет экземпляром.

Магия JSX такова, что имена тегов - это просто переменные. Например, когда вы вводите <div />, имя тега просто ссылается на переменную div, определенную ядром React. Предполагая, что вы импортировали компонент Foo, когда вы вводите <Foo />, тогда имя тега ссылается на переменную, которую вы импортировали из области импорта.

Вы можете использовать компонент более высокого порядка, который принимает компонент React, а затем использовать этот компонент в методе визуализации.Например (оговорка, я пишу это на лету, и он может содержать ошибки):

// Assume the variables `studios, actors, projects` are arrays 
// of their respective item types, and `StudioDetail, ActorDetail, 
// ProjectDetail` are the customized views you've described in 
// your question. 

class ItemList extends React.Component { 
    render() { 
    const View = this.props.view; 
    const items = this.props.items; 
    return (<div> 
     {items.map((item, i) => <View key={i} item={item} />} 
    </div>); 
    } 
} 

class App extends React.Component { 
    render() { 
    return (<div> 
     <ItemList view={StudioDetail} items={studios} /> 
     <ItemList view={ActorDetail} items={actors} /> 
     <ItemList view={ProjectDetail} items={projects} /> 
    </div>); 
    } 
} 

Просто убедитесь, что все, что вы передаете в view реквизита является компонентом, соответствующего типа элемента вы показываете, и вы должны быть в хорошем начале.