Pass DOM Element в качестве опоры в реакторе

Question

Итак, у меня есть компонент, которому нужен элемент DOM, переданный в качестве опоры. Я пытаюсь использовать его в другом компоненте, как так:

<div> 
     <div className="myPropDiv" ref="myPropDiv">...</div> 
     <CustomComponent view={ this.refs.myPropDiv } /> 
    </div> 

Но это не работает, потому что (я подозреваю) DOM-не была оказана на месте, я звоню this.refs.myPropDiv. Как я мог бы сделать что-то подобное?

Answer 1

Вы не можете получить прямой доступ к DOM, но вы можете получить доступ к элементу DOM для React компонента с ReactDOM.findDOMNode(component), поэтому использовать его внутри componentDidMount вызова вы будете использовать:

var MyComponent = React.createComponent({ 
    ... 
    componentDidMount: function() { 
    var component = this, 
     node = ReactDOM.findDOMNode(component); 
    } 
    ... 
}); 

Тогда если вы ищу дочерний узел этого родительского узла DOM, вы можете пройти через DOM обычно из этого узла, например:

var childNode = node.querySelectorAll('.child-node-class')[0]; 

Затем вы можете передать его туда, где вы изначально хотели.

Answer 2

В большинстве ситуаций это не очень хорошая идея, и, по крайней мере, это не похоже на то, что она идет по пути Реагирования.

Во-первых, получив этот div через ref, вы не получите элемент DOM, а скорее поддерживаете экземпляр этого div. Вы можете получить элемент DOM, например, toomanyredirects.

Что вы пытаетесь достичь в любом случае? Одно из преимуществ React - вам не нужно возиться с оригинальным DOM, но играть с виртуальным. Если вы хотите просто отобразить этот div внутри своего компонента, чем передать его так.

<CustomComponent> <div className="myPropDiv" ref="myPropDiv">...</div> </CustomComponent>

Затем, вы можете получить доступ к этому DIV внутри CustomComponent как props.children.