reactjs - ref中文 - react获取子组件




从React子元素获取DOM节点 (4)

this.props.children应该是ReactElement或ReactElement数组,而不是组件。

要获取children元素的DOM节点,您需要克隆它们并为它们分配新的ref。

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

然后,您可以通过this.refs[childIdx]访问子组件,并通过ReactDOM.findDOMNode(this.refs[childIdx])检索其DOM节点。

使用React.findDOMNode中引入的React.findDOMNode方法,我能够通过映射this.props.children传递给父组件的每个子组件的DOM节点。

但是,如果某些孩子碰巧是React Elements而不是Components(例如,其中一个孩子是通过JSX创建的<div> ),React会抛出一个不变的违规错误。

有没有办法在挂载后获取每个子节点的正确DOM节点,而不管子节点是什么类?


另一个答案中提到的React.findDOMNode(this.refs.myExample)已被删除。

使用来自'react-dom' ReactDOM.findDOMNode

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

我找到了一种使用新回调引用的简单方法。 您可以将回调作为prop传递给子组件。 喜欢这个:

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>
)

以下是使用模态执行此操作的示例:

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>
)

这可以通过使用refs属性来实现。

在想要达到<div>的例子中,你想要做的是使用<div ref="myExample"> 。 然后,您将能够使用React.findDOMNode(this.refs.myExample)获取该DOM节点。

从那里获取每个子节点的正确DOM节点可能就像映射this.refs.myExample.children一样简单(我还没有测试过)但是你至少可以通过使用来获取任何特定的挂载子节点ref属性。

以下是关于refs的官方反应文档以获取更多信息。





reactjs