react中怎样在父组件中获取子组件中的Dom

Question

我想通过父组件的this.refs.addTemplateReport来获取子组件<AddTemplateReport />,是可以获得到的。但是想继续获取子组件<AddTemplateReport />里的Dom就获取不到了。
代码截图如下：

以下是父组件的子组件<AddTemplateReport />在父组件里的代码。
代码截图如下：

子组件<AddTemplateReport />的代码如下：

我在div中添加了ref=epiceditor想通过子组件的refs来获取这个Dom；但是失败了！
我尝试在控制台输出下：

结果控制台输出的是undefined:

请大侠们解答谢谢了。

Answer 1

官网已经不推荐使用ref=字符串的形式, 后来就没用了refs这种形式了, 大多是使用ref=() => {}箭头函数的形式来获取

class Parent extends PureComponent {
  componentDidMount() {
    console.log(this.child._input) // 这里就能拿到子组件的input
  }
  render() {
    return (
      <div>
        <Childed ref={r => this.child = r} />
      </div>
    )
  }
}

class Childed extends PureComponent {

  render() {
    return (
      <div>
        <input type="text" ref={r => this._input = r} />
      </div>
    )
  }
}

Answer 2

this.refs.xxx 是一个什么那

Answer 3

ReactDOM.findDOMNode

Answer 4

在极少数情况下，你可能希望在父组件中引用子节点的 DOM 节点。通常不建议这样做，因为它会打破组件的封装，但它偶尔可用于触发焦点或测量子 DOM 节点的大小或位置。

虽然你可以向子组件添加 ref，但这不是一个理想的解决方案，因为你只能获取组件实例而不是 DOM 节点。并且，它还在函数组件上无效。

// 涉及到组件之间的传递，最保险的还是通过父子之间的props直接传递更直观方便
// 引入这个帖子的那位朋友的部分代码，更改如下：

class Parent extends PureComponent {
  componentDidMount() {
     console.log(this.leftLine); 
     // 这里就能拿到子组件的 left_line元素了
     // <div class="left_line"></div>
  }
  render() {
    return (
      <div>
        <LeftLine lineRef={l => this.leftLine = l} />
      </div>
    )
  }
}

const LeftLine = ({ lineRef }) => {
  return (
    <div className="left_line" ref={lineRef}></div>
  )
}

这样就可以获取到了，而不需要使用增加id的方式进行获取，如：document.getElementById("left_line")

希望对你有所帮助 ~