Question

我从这里开始接下来的代码：https://www.meteor.com/tutorials/react/adding-user-accounts 我可以在这种特殊情况下更换 ReactDOM.findDOMNode(this.refs.container))与
this.refs.container
没有任何隐藏的错误？

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" />;
  }
}

甚至可能使用回调函数进行更改：

....
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) />;
  }
}

Answer 1

正如react refs文档中所建议的那样

如果您之前使用过React，那么您可能熟悉旧版本其中ref属性是字符串的API，例如＆＃34; textInput＆＃34;和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) />;
  }
}

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

1 个答案: