从 React 子元素获取 DOM 节点

IT技术 reactjs
2021-04-11 08:46:42

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

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

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

6个回答

this.props.children 应该是一个 ReactElement 或一个 ReactElement 数组,但不是组件。

要获取子元素的 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])

你如何从高阶组件公开引用?例如导出默认 withInputMask(withRequired(withReadOnly(withMinMax(withHidden(TextInput))))); 如果我想从 withInputMask 访问 TextInput 中的 dom 元素,我将如何实现?我尝试过回调引用,但它在 withInputMask 中不可用。它的未定义。
2021-05-28 08:46:42
请注意,它this.props.children可以包含纯文本节点(就像在我的案例中设计<Tooltip>可以包裹任何有效 jsx的灵活组件时有时所做的那样)。这将导致React.cloneElement(element). 因此,检查React.isValidElement(element)和/或typeof element === 'string'.
2021-05-28 08:46:42
这不会破坏ref分配给父级中子级的任何现有吗?换句话说,如果你有<div ref="a" />你的孩子,这不会refs.a因为你覆盖它而破坏任何引用idx吗?
2021-06-08 08:46:42
确实如此。如果你想保留 refs,你应该使用回调 refs{ ref: node => this.node = node; element.ref(node); }
2021-06-12 08:46:42
@monkeyjumps componentDidMount() { let outtermostDomNodeOfHoc = ReactDOM.findDOMNode(this)) }
2021-06-19 08:46:42

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

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

然后你可以直接:

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

},

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

请注意,仅当您向 DOM 元素添加了 ref(例如 <div ref="myRef" />)时才需要 findDOMNode。如果您在 React 组件节点上使用 ref,则确实需要它(例如 <MyComponent ref="myRef" />。在第一种情况下 this.refs.myRef 是 DOM 节点,而在第二种情况下它是 React 组件实例。
2021-05-23 08:46:42

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

在想要达到一个的示例中,<div>您想要做的是使用 is <div ref="myExample">然后你就可以使用React.findDOMNode(this.refs.myExample).

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

这是关于 refs的官方react文档以获取更多信息。

沿着将组件设置为状态的反模式路径的绝佳解决方案(如果您有此解决方案,则不执行此模式并通过有状态变量有条件地呈现它)
2021-06-06 08:46:42
为我工作,但 api 现在 ReactDom.findDOMNode(..)
2021-06-21 08:46:42

你可以使用新的React ref api来做到这一点

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} />;
  }
}
你如何适应未知数量的children
2021-06-12 08:46:42
这是截至 2018 年 11 月的最新答案。也是最简单的。
2021-06-21 08:46:42

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

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

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