Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在这种情况下是否需要ReactDOM.findDOMNode?_Javascript_Reactjs - Fatal编程技术网

Javascript 在这种情况下是否需要ReactDOM.findDOMNode?

Javascript 在这种情况下是否需要ReactDOM.findDOMNode?,javascript,reactjs,Javascript,Reactjs,我从这里获取了下一个代码:。 在这种特殊情况下,我可以更换吗 ReactDOM.findDOMNode(this.refs.container))with 此.refs.container 将来没有任何隐藏的bug import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { Template } from 'meteor/templating'; import { Blaze } fro

我从这里获取了下一个代码:。
在这种特殊情况下,我可以更换吗
ReactDOM.findDOMNode(this.refs.container))
with
此.refs.container

将来没有任何隐藏的bug

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Template } from 'meteor/templating';
import { Blaze } from 'meteor/blaze';

export default class AccountsUIWrapper extends Component {
  componentDidMount() {
    // Use Meteor Blaze to render login buttons
    this.view = Blaze.render(Template.loginButtons,
      ReactDOM.findDOMNode(this.refs.container));
  }
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view);
  }
  render() {
    // Just render a placeholder container that will be filled in
    return <span ref="container" />;
  }
}
import React,{Component}来自'React';
从“react dom”导入react dom;
从“meteor/Templateing”导入{Template};
从“流星/火焰”导入{Blaze};
导出默认类AccountsUIWrapper扩展组件{
componentDidMount(){
//使用Meteor Blaze渲染登录按钮
this.view=Blaze.render(Template.loginButtons,
findDOMNode(this.refs.container));
}
组件将卸载(){
//清理火焰视图
移除(此视图);
}
render(){
//只需呈现一个将被填充的占位符容器
返回;
}
}
或者甚至可以使用回调函数进行更改:

....
export default class AccountsUIWrapper extends Component {
  componentDidMount() {
    // Use Meteor Blaze to render login buttons
    this.view = Blaze.render(Template.loginButtons,
      this.container);
  }
  ....
  render() {
    // Just render a placeholder container that will be filled in
    return <span ref={(node) => (this.container = node) />;
  }
}
。。。。
导出默认类AccountsUIWrapper扩展组件{
componentDidMount(){
//使用Meteor Blaze渲染登录按钮
this.view=Blaze.render(Template.loginButtons,
这是一个集装箱);
}
....
render(){
//只需呈现一个将被填充的占位符容器
返回(this.container=node)/>;
}
}

如react refs文档中所建议

如果您以前与React合作过,您可能会熟悉一位年长的 API,其中ref属性是字符串,如“textInput”,DOM 节点作为this.refs.textInput访问。我们建议不要这样做,因为 字符串引用有一些问题,被认为是遗留的,并且很可能 将在将来的某个版本中删除。如果您当前正在使用 this.refs.textInput要访问refs,建议使用回调模式 相反

因此,如果您希望获得未来的支持,
ref callback
是正确的选择

export default class AccountsUIWrapper extends Component {
  componentDidMount() {

    this.view = Blaze.render(Template.loginButtons,
      this.container);
  }
  ....
  render() {

    return <span ref={(node) => (this.container = node) />;
  }
}
导出默认类AccountsUIWrapper扩展组件{
componentDidMount(){
this.view=Blaze.render(Template.loginButtons,
这是一个集装箱);
}
....
render(){
返回(this.container=node)/>;
}
}

ReactDOM.findDOMNode呢?在这种情况下省略它安全吗?当然可以,因为您仍在使用字符串引用。Ref回调是最好的建议方式