Как выбрать все дочерние компоненты (а не элементы DOM), используемые в шаблоне компонента Reactjs?

Question

У меня есть ситуации, когда у меня есть два элемента, которые связаны друг с другом, с советом, который без negotiably всегда состоит из 4 уточняющих панелей:

var BoardPanel = React.createClass({ 
    getInitialState: function() { 
    return { someval: '' }; 
    }, 
    render: function() { 
    <div>{this.state.someval}</div> 
    }, 
    doSomething: function(v) { 
    setState({ someval: v }); 
    } 
}); 

var BoardLayout = React.createClass({ 
    render: function() { 
    <div> 
     <h1>{this.props.label{</h1> 
     <div ref="panels"> 
     <BoardPanel /> 
     <BoardPanel /> 
     <BoardPanel /> 
     <BoardPanel /> 
     </div> 
    </div> 
    } 
}); 

BoardLayout должен быть в состоянии равномерно сказать каждое BoardPanel вызвать панель функции API, так что я хотел бы сделать React.js эквивалент:

this.querySelectorAll("BoardPanel") 
    .array() 
    .forEach(function(panel, idx) { 
     panel.doSomething(idx); 
    }); 

Обратите внимание, что я специально не хочу получить доступ к DOM узлов здесь, я хочу, чтобы получить доступ к React определенных виртуальным элементов, вызывать функции на этом и никогда не прикасаться фактический используемый DOM браузером.

Я имел взгляд на вспомогательные функции React.children, но это довольно бесполезно, потому что нет никакого способа, чтобы определить, какие дети, я хочу, и this.props.children собирается дать мне два div элементов, так как BoardPanel элементы живут " глубоко внутри шаблона.

(Я также не согласен с добавлением ref="..." с идентификаторами throwaway для каждого BoardPanel, потому что не должно быть необходимости это делать, учитывая, что это хорошо отформатированная структурированная разметка. Это возможное обходное решение, но кажется примерно так же разумно, как пощечины иды на каждом элементе в HTML-файл, вместо того, чтобы полагаться на селекторы запросов)

Я мог бы динамически генерировать их на самом деле не имея их в шаблоне вообще и добавить их с помощью React.create(BoardPanel) в BoardLayout.getInitialState, но это повлечет за сразу проницательную структуру шаблонов в непрозрачный местозаполнитель, что также я бы предпочел не делать.

Могу ли я, в BoardLayout.componentDidMount или как-нибудь получить массив из BoardPanel компонентов, чтобы я мог непосредственно проинструктировать эти компоненты, чтобы что-то делать? Если да, то как?

Answer 1

Если вам нужно сделать это (вы, вероятно, нет), вам нужно использовать refs.

function refsToArray(ctx, prefix){ 
    var results = []; 
    for (var i=0;;i++){ 
    var ref = ctx.refs[prefix + '-' + String(i)]; 
    if (ref) results.push(ref); 
    else return results; 
    } 
} 

var BoardLayout = React.createClass({ 
    var makeRef = function(){ return 'BoardPanel-'+(_refi++); }, _refi=0; 
    render: function() { 
    <div> 
     <h1>{this.props.label{</h1> 
     <div ref="panels"> 
     <BoardPanel ref={makeRef()} /> 
     <BoardPanel ref={makeRef()} /> 
     <BoardPanel ref={makeRef()} /> 
     <BoardPanel ref={makeRef()} /> 
     </div> 
    </div> 
    } 
}); 

И тогда вы могли бы сделать, чтобы получить refsToArray(this, 'BoardPanel') массив рефов.

Но, как я уже сказал, вероятно, лучшее решение, но вы не указали, что вы на самом деле пытаетесь сделать.