blocks|key|2572303|text|this.props.children应该是ReactElement或ReactElement数组，而不是组件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2572304|要获得子元素的DOM节点，需要克隆它们并为它们分配一个新的引用。|2572305|render()+{
++return+(
++++<div>
++++++{React.Children.map(this.props.children,+(element,+idx)+=>+{
++++++++return+React.cloneElement(element,+{+ref:+idx+});
++++++})}
++++</div>
++);
}|code-block|syntax|javascript|2572306|然后可以通过this.refs[childIdx]访问子组件，并通过ReactDOM.findDOMNode(this.refs[childIdx])检索它们的DOM节点。|2572307|entityMap^0|0|J|0|0|0|6|J|Y|15|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]



<p><code>this.props.children</code> should either be a ReactElement or an array of ReactElement, but not components.</p>

<p>To get the DOM nodes of the children elements, you need to clone them and assign them a new ref.</p>

<pre class="lang-js prettyprint-override"><code>render() {
  return (
    &lt;div&gt;
      {React.Children.map(this.props.children, (element, idx) =&gt; {
        return React.cloneElement(element, { ref: idx });
      })}
    &lt;/div&gt;
  );
}
</code></pre>

<p>You can then access the child components via <code>this.refs[childIdx]</code>, and retrieve their DOM nodes via <code>ReactDOM.findDOMNode(this.refs[childIdx])</code>.</p>


blocks|key|2572331|text|如果您想访问任何DOM元素，只需添加ref属性，就可以直接访问该元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2572332|<input+type="text"+ref="myinput">|code-block|syntax|javascript|2572333|然后你可以直接：|2572334|componentDidMount:+function()+
{
++++this.refs.myinput.select();

},|2572335|如果您在任何元素中添加了一个ReactDOM.findDOMNode()，则它们不需要使用ref。|2572336|entityMap^0|I|3|0|0|0|0|E|M|19|3|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

<p>If you want to access any DOM element simply add <code>ref</code> attribute and you can directly access that element.</p>

<pre><code>&lt;input type="text" ref="myinput"&gt;
</code></pre>

<p>And then you can directly:</p>

<pre><code>componentDidMount: function() 
{
    this.refs.myinput.select();

},
</code></pre>

<p>Their is no need of using <code>ReactDOM.findDOMNode()</code>, if you have added a <code>ref</code> to any element.</p>


blocks|key|1274110|text|这可以通过使用ref属性来实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1274111|在想要达到<div>的例子中，您想要做的是使用<div+ref="myExample">。然后，您将能够通过使用React.findDOMNode(this.refs.myExample)获得DOM节点。|offset|length|style|CODE|1274112|从那里获得每个子节点的正确DOM节点可能就像在this.refs.myExample.children上映射一样简单(我还没有测试过)，但是您至少可以使用ref属性获取任何特定的挂载子节点。|1274113|这是官方的参考文献获取更多信息。|1274114|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/react/docs/more-about-refs.html^0|0|5|5|N|L|1K|12|0|N|S|0|5|4|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]|$D|X|E|Y|F|G]|$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|L|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

<p>This may be possible by using the refs attribute.</p>

<p>In the example of wanting to to reach a <code>&lt;div&gt;</code> what you would want to do is use is <code>&lt;div ref="myExample"&gt;</code>.  Then you would be able to get that DOM node by using <code>React.findDOMNode(this.refs.myExample)</code>.</p>

<p>From there getting the correct DOM node of each child may be as simple as mapping over <code>this.refs.myExample.children</code>(I haven't tested that yet) but you'll at least be able to grab any specific mounted child node by using the ref attribute. </p>

<p>Here's the official <a href="https://facebook.github.io/react/docs/more-about-refs.html" rel="noreferrer">react documentation on refs</a> for more info.</p>


blocks|key|1274238|text|您可以使用新的反应参考api来完成这个任务。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1274239|function+ChildComponent({+childRef+})+{
++return+<div+ref={childRef}+/>;
}

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

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

++render()+{
++++return+<ChildComponent+childRef={this.myRef}+/>;
++}
}|code-block|syntax|javascript|1274240|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/docs/refs-and-the-dom.html^0|7|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can do this using the new <a href="https://reactjs.org/docs/refs-and-the-dom.html" rel="nofollow noreferrer">React ref api</a>.</p>

<pre><code>function ChildComponent({ childRef }) {
  return &lt;div ref={childRef} /&gt;;
}

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

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

  render() {
    return &lt;ChildComponent childRef={this.myRef} /&gt;;
  }
}
</code></pre>


blocks|key|1274158|text|在另一个答案中提到的React.findDOMNode(this.refs.myExample)已经被废弃了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1274159|使用ReactDOM.findDOMNode从'react-dom'代替|1274160|import+ReactDOM+from+'react-dom'
let+myExample+=+ReactDOM.findDOMNode(this.refs.myExample)|code-block|syntax|javascript|1274161|entityMap^0|A|12|0|2|K|N|B|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p><code>React.findDOMNode(this.refs.myExample)</code> mentioned in another answer has been deprectaed.</p>

<p>use <code>ReactDOM.findDOMNode</code> from <code>'react-dom'</code> instead</p>

<pre><code>import ReactDOM from 'react-dom'
let myExample = ReactDOM.findDOMNode(this.refs.myExample)
</code></pre>


blocks|key|1274219|text|我找到了一种简单的使用新的回调裁判的方法。您可以将回调作为支持传递给子组件。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1274220|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>
)|code-block|syntax|javascript|1274221|下面是一个使用模式来实现此操作的示例：|1274222|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>
)|1274223|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I found an easy way using the new callback refs. You can just pass a callback as a prop to the child component. Like this:</p>

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

  setRef(node) {
    this.childRef = node
  }

  render() {
    return &lt;Child setRef={ this.setRef }/&gt;
  }
}

const Child = ({ setRef }) =&gt; (
    &lt;div ref={ setRef }&gt;
    &lt;/div&gt;
)
</code></pre>

<p>Here's an example of doing this with a modal:</p>

<pre><code>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 (
      &lt;div&gt;
        &lt;button onClick={ this.open }&gt;Open&lt;/button&gt;
        {
          modalOpen ? &lt;Modal close={ this.close } setModal={ this.setModal }/&gt; : null
        }
      &lt;/div&gt;
    )
  }
}

const Modal = ({ close, setModal }) =&gt; (
  &lt;div className='modal' onClick={ close }&gt;
    &lt;div className='modal-window' ref={ setModal }&gt;
    &lt;/div&gt;
  &lt;/div&gt;
)
</code></pre>


<p>Using the <code>React.findDOMNode</code> method that was introduced in v0.13.0 I am able to get the DOM node of each child component that was passed into a parent by mapping over <code>this.props.children</code>.</p>

<p>However, if some of the children happen to be React Elements rather than Components (e.g. one of the children is a <code>&lt;div&gt;</code> created via JSX) React throws an invariant violation error.</p>

<p>Is there a way to get the correct DOM node of each child after mount regardless of what class the child is?</p>


Getting DOM node from React child element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

使用v0.13.0中引入的React.findDOMNode方法，我能够通过this.props.children上的映射获得传递给父组件的每个子组件的DOM节点。但是，如果其中一些子元素恰好是React元素而不是组件(例如，其中一个子元素是通过JSX创建的<div> )，那么React将抛出一个不变的违规错误。是否有一种方法可以在挂载后获得每个子节点的正确DOM节点，而不管子节点是哪个类？

问从React子元素获取DOM节点
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从React子元素获取DOM节点EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从React子元素获取DOM节点
EN