Инъекционный компонент в другой компонент

Каков предпочтительный способ вставки компонента в другой компонент? У меня есть объектно-ориентированная структура приложения, где View только знает о ее родительском представлении. Поскольку все мои компоненты являются «динамическими» компонентами, я заранее не знаю структуру компонента.Инъекционный компонент в другой компонент

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

/** @jsx React.DOM */ 
var component = React.createClass({ 
    render: function() { 
     return (
      <div> 
       .. many elements here .. 
       {this.props.children} 
      </div> 
     ); 
    } 
}); 
var subcomponent = React.createClass({ 
    render: function() { 
     return (
      <div>test</div> 
     ); 
    } 
}); 

var parentView = React.renderComponent(
    <component>.. subelements</component>, 
    document.getElementById('reactContainer') 
);

1. Несколько компонентов оказанной

var subView = React.renderComponent(
    <subcomponent />, 
    parentView.getDOMNode() 
);

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

2. Вводят субкомпонент через setProp с одной renderComponent

Другой подход заключается в установлении детей проп.

parentView.setProps({ 
    children: <subcomponent /> 
});

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

parentView.setProps({ 
    children: [parentView.props.children, <subcomponent />] 
});

Но теперь childView управляет дочерними элементами своего родителя. Но я мог бы извлечь это для метода parentView.

Другим недостатком является то, что, когда глубина просмотра глубже, чем 2, ссылка на компонент React отсутствует, потому что только rootView визуализируется через React.renderComponent, и поэтому я могу делать setProps только в корневом режиме.

Мне кажется, мне нужен React.renderComponent для каждого вида, но я не знаю, как его вводить в родительский.

источник

2014-10-16 Willem de Wit

Я не могу полностью понять вашу модель, но, похоже, вы боретесь с идиоматическим способом реагирования. Возможно, вам следует перечитать документы и начать заново :( Вам не нужно вводить детей, и они определенно не должны передаваться в качестве реквизита. Как обращаться с детьми, здесь адресован: http://facebook.github.io /react/docs/multiple-components.html – edoloughlin

Я также очень смущен тем, что вы пытаетесь сделать здесь. Чтобы иметь дочерний компонент внутри родителя, вы просто вызываете дочерний элемент внутри функции «render» родителя Почему вы пытаетесь вставить ребенка через реквизит полностью вне меня и абсолютно не то, что вы, как правило, пытаетесь сделать с React. –

В большинстве случаев предпочтительный способ передать компонент вниз к другому компоненту с помощью специальных детей пропеллера (как вы показываете в вашем примере):

var component = React.createClass({ 
    render: function() { 
     return (
      <div> 
       .. many elements here .. 
       {this.props.children} 
      </div> 
     ); 
    } 
});

вы можете прочитать больше here

источник

2016-11-13 02:00:44 jacoballenwood

Инъекционный компонент в другой компонент

ответ

Смежные вопросы