从React子元素获取DOM节点

Question

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

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

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

Answer 1

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],并通过它检索其DOM节点ReactDOM.findDOMNode(this.refs[childIdx]).

Answer 2

如果要访问任何DOM元素,只需添加ref属性即可直接访问该元素.

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

然后你可以直接:

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

},

ReactDOM.findDOMNode()如果您已添加ref任何元素,则无需使用它们.

Answer 3

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

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

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

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

Answer 4

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

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

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

Answer 5

您可以使用新的React ref api进行此操作。

function ChildComponent({childRef}) {
 returns (<div ref={childRef} />)
}

class Parent extends Component {
  myRef = React.createRef()

  get doSomethingWithChildRef() {
     console.log(this.myRef) // Will access child DOM node.
  }

  render() {
    <ChildComponent childRef={this.myRef}>
  }
}