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回调是最好的建议方式