Существует несколько способов достичь этого в React.Основной вопрос заключается в том, можете ли вы изменить код этих компонентов или нет.
В случае, если вы не можете: вам придется создавать новые компоненты в соответствии с потребностями клиента, применяя версию знаменитого «рендеринга с высоким разрешением»".
Если вам нужно это для работы с композицией (композиция предпочтительнее наследования по разным причинам), вам необходимо применить компонент высшего порядка (HOC), который заменяет оригинальный метод рендеринга.Вот одна ссылка, но если вы ищете термин, вы найдете больше вариантов.https://blog.callstack.io/sweet-render-hijacking-with-react-bb2b81d8d9be
Если вы не возражаете, и вам просто нужно, чтобы он работал быстро, перейдите к расширению класса Component1, напишите новый метод рендеринга и пропустите методы, которые не нуждаются в улучшениях.
например,
class Component1v1 extends Component1 {
render() {
return(
{'My old and My new stuff'}
);
}
}
Если вы можете редактировать существующие компоненты, у вас есть несколько способов добиться этого.
Опция 1: условный рендеринг
Не мойчашка чая, но в некоторых случаях это имеет смысл: например,
class Component1 extends React.Component {
...
render() {
return(
<input1/>
<input2/>
{customer2 && <input3_cust2/> : <input3/>}
);
}
}
Как правило, нет смысла иметь компоненты, которые нужно редактировать для каждого из вас, поэтому я бы сказалс компонентом-оберткой, который визуализирует другие и увеличивает их способности.Из того, что я могу собрать, лучше оставить большую часть обработки для обертки, чтобы она была последовательной.
Опция 2: Обертка, которая передает дополнительных детей
например
class Component1 extends React.Component {
render() {
return(
<div>
<input1 onChange={this.props.onChange}/>
<input2 onChange={this.props.onChange}/>
{...this.props.children}
</div>
);
}
}
class Wrapper extends React.Component {
handleChange(e) {
return null;
}
render() {
return(
<Component1 onChange={this.handleChange}>
<input3 onChange={this.handleChange}/>
</Component1>
);
}
}
Пожалуйстаимейте в виду, что это псевдокод, он не будет работать без исправлений
В любом случае, вы можете создавать обертки для каждой или одну обертку для всех в зависимости от ситуации.Вы передаете в качестве «детей» все поля, которые вам нужны, чтобы иметь отношение к вашим клиентам.
Как я упоминал ранее, наличие компонентов, требующих модификации в соответствии с клиентом, не имеет особого смысла, вы, вероятно,нужно потратить некоторое время на группирование и разделение вашего слоя представления и вашей логики так, как вам удобно.Это означает, что вам нужно переопределить ваши компоненты.