#reactjs
Вопрос:
У меня есть компонент, который отображает структуру данных. Я пытаюсь создать редактор для этой структуры и хочу использовать тот же самый рендерер, но с переопределенными определенными подкомпонентами. У средства визуализации есть некоторые данные, которые я хотел бы передать в подкомпонент, поэтому я подумал, что лучше всего использовать переданный класс, который средство визуализации сможет вызвать и включить данные в качестве реквизитов. Что-то примерно такое:
class Editor extends React.Component{ render(){ return lt;Renderer overrideClass={OverridenComponent}/gt;; } } class Renderer extends React.Component{ render(){ return lt;this.props.overrideClass importantData="TEST"/gt;; } } class OverriddenComponent extends React.Component{ render(){ return lt;divgt;{this.props.importantData}lt;/divgt;; } } Я ожидал бы, что создание lt;Editor/gt; приведет к lt;divgt;TESTlt;/divgt; появлению в DOM , но вместо этого я получаю то, что эквивалентно lt;overridencomponentgt;lt;/overridencomponentgt; , в частности, без заглавных букв и без содержимого.
Поддерживается ли каким-то образом такое поведение? Есть ли лучший способ выполнить такого рода переопределяемое содержимое, все еще позволяя классу визуализации передавать данные в переопределенную версию?
Ответ №1:
JSX отображает только компоненты, имена которых написаны с заглавной буквы. Поэтому вам следует сохранить класс переопределения в переменной с заглавной буквы.
Попробуй:
class Editor extends React.Component{ render(){ return lt;Renderer overrideClass={OverridenComponent}/gt;; } } class Renderer extends React.Component{ render(){ const Component = this.props.overrideClass return lt;Component importantData="TEST"/gt;; } } class OverriddenComponent extends React.Component{ render(){ return lt;divgt;{this.props.importantData}lt;/divgt;; } } Комментарии:
1. Странно, что это должно быть явно названо так, но ладно, рад, что это сработало
Ответ №2:
В дополнение к отмеченному выше ответу я обнаружил, что передача функции обратного вызова, которая принимает реквизиты и возвращает экземпляр класса, также эффективна. Это выглядело так:
class Editor extends React.Component{ render(){ return lt;Renderer overrideClass={(importantData) =gt; lt;OverridenComponent importantData={importantData}/gt;} /gt;; } } class Renderer extends React.Component{ render(){ return this.props.overrideClass("TEST"); } } class OverriddenComponent extends React.Component{ render(){ return lt;divgt;{this.props.importantData}lt;/divgt;; } } Я не уверен, какой именно метод лучше, но его ответ был ближе к тому, о чем я на самом деле просил, если говорить о прохождении класса. Я подозреваю, что его способ тоже более гибкий.