从 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)
其它你可能感兴趣的问题
上一篇React.js ES6 避免将“this”绑定到每个方法 下一篇React - 检查元素是否在 DOM 中可见