reactjs - que - Obtención del nodo DOM del elemento secundario Reaccionar

que es dom en informatica

Question

Utilizando el método React.findDOMNode que se introdujo en v0.13.0, puedo obtener el nodo DOM de cada componente secundario que se pasó a uno de los padres mapeando this.props.children .

Sin embargo, si algunos de los niños son Elementos de Reacción en vez de Componentes (por ejemplo, uno de los niños es un <div> creado a través de JSX) Reaccionar arroja un error de violación invariable.

¿Hay alguna forma de obtener el nodo DOM correcto de cada hijo después del montaje, independientemente de la clase del niño?

Answer 1

Encontré una manera fácil de usar los nuevos refs de devolución de llamada. Puede pasar una devolución de llamada como apoyo al componente secundario. Me gusta esto:

class Container extends React.Component {
  constructor(props) {
    super(props)
    this.setRef = this.setRef.bind(this)
  }

  setRef(node) {
    this.childRef = node
  }

  render() {
    return <Child setRef={ this.setRef }/>
  }
}

const Child = ({ setRef }) => (
    <div ref={ setRef }>
    </div>
)

Aquí hay un ejemplo de hacer esto con un modal:

class Container extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      modalOpen: false
    }
    this.open = this.open.bind(this)
    this.close = this.close.bind(this)
    this.setModal = this.setModal.bind(this)
  }

  open() {
    this.setState({ open: true })
  }

  close(event) {
    if (!this.modal.contains(event.target)) {
      this.setState({ open: false })
    }
  }

  setModal(node) {
    this.modal = node
  }

  render() {
    let { modalOpen } = this.state
    return (
      <div>
        <button onClick={ this.open }>Open</button>
        {
          modalOpen ? <Modal close={ this.close } setModal={ this.setModal }/> : null
        }
      </div>
    )
  }
}

const Modal = ({ close, setModal }) => (
  <div className=''modal'' onClick={ close }>
    <div className=''modal-window'' ref={ setModal }>
    </div>
  </div>
)

Answer 2

Esto puede ser posible utilizando el atributo refs.

En el ejemplo de querer alcanzar un <div> lo que querría hacer es usar es <div ref="myExample"> . Entonces usted podría obtener ese nodo DOM usando React.findDOMNode(this.refs.myExample) .

A partir de ahí, obtener el nodo DOM correcto de cada niño puede ser tan simple como mapear sobre this.refs.myExample.children (aún no lo he probado), pero al menos podrá agarrar cualquier nodo hijo montado montado mediante el uso de el atributo ref.

Aquí está la documentación oficial de reacción en refs para más información.

Answer 3

Si desea acceder a cualquier elemento DOM simplemente agregue el atributo ref y puede acceder directamente a ese elemento.

<input type="text" ref="myinput">

Y luego puedes directamente:

componentDidMount: function() 
{
    this.refs.myinput.select();

},

No es necesario usar ReactDOM.findDOMNode() , si ha agregado una ref a cualquier elemento.

Answer 4

React.findDOMNode(this.refs.myExample) mencionado en otra respuesta se ha depreciado.

use ReactDOM.findDOMNode de ''react-dom'' lugar

import ReactDOM from ''react-dom''
let myExample = ReactDOM.findDOMNode(this.refs.myExample)

Answer 5

this.props.children debería ser un ReactElement o una matriz de ReactElement, pero no componentes.

Para obtener los nodos DOM de los elementos secundarios, debe clonarlos y asignarles una nueva referencia.

render() {
  return (
    <div>
      {React.Children.map(this.props.children, (element, idx) => {
        return React.cloneElement(element, { ref: idx });
      })}
    </div>
  );
}

A continuación, puede acceder a los componentes secundarios a través de this.refs[childIdx] y recuperar sus nodos DOM a través de ReactDOM.findDOMNode(this.refs[childIdx]) .