Реагировать метод жизненного цикла на createElement()

Я хочу сохранить мои компоненты в массив, чтобы получить дополнительный доступ к таким методам, как addChild. Я не могу найти подходящий метод жизненного цикла для хранения компонента. Сейчас я злоупотребляю функцией getInitialState.Реагировать метод жизненного цикла на createElement()

components = {}; 

function Component(){ 
    return React.createClass({ 
    getInitialState : function({ 
     components[this.props.id] = {addChild: this.addChild}; 
     return child : []; 
    }), 
    addChild(child){ 
     this.state.children.push(child); 
     this.setState({ 
     children : this.state.children 
     }); 

    ... 
    }); 
}

Эта функция срабатывает, только если компонент визуализирован. Есть ли функция жизненного цикла, которая выполняется после создания компонента с createElement()?

Или есть лучший способ сохранить компонент для получения доступа к методам?

источник

2016-06-22 landunder

Я не понимаю, что вы пытаетесь сделать. Вы можете сохранить созданные элементы, я не вижу, где проблема с этим. Вы также можете получить доступ к их свойствам. Однако вы не можете изменить их, поскольку они будут прочитаны только. Вы не можете либо получить доступ к их состоянию, как только экземпляры будут иметь один, а не элемент. Если вам нужно получить доступ к экземплярам, вы можете использовать ['ref'] (https://facebook.github.io/react/docs/more-about-refs.html). –

Методы типа 'addChild' выглядят как анти-шаблон. Почему бы вам просто не перерисовать элементы при появлении нового ребенка? Для этого используется реакция на использование. –

После более тщательного чтения, похоже, что вы хотите, это ref. –

Вы можете получить экземпляр элемента после его рендеринга, предоставив обратный вызов ref property этого элемента.

Вот как вы можете использовать его (я предположил, что вы есть JSX и ES6 transpiler):

var instances = {}; 
const storeInstance = (i) => instances[i.props.id] = i; 

var foo1 = (<Hello id="foo1" ref={storeInstance}/>); 
var foo2 = (<Hello id="foo2" ref={storeInstance}/>); 
var foo3 = (<Hello id="foo3" ref={storeInstance}/>);

Here is a live version.

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

источник

2016-06-22 13:20:35

Реагировать метод жизненного цикла на createElement()

ответ

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