Question

有谁理解为什么我在以下示例中无法使用class AlignmentImageView: UIImageView { enum HorizontalAlignment { case left, center, right } enum VerticalAlignment { case top, center, bottom } // MARK: Properties var horizontalAlignment: HorizontalAlignment = .center var verticalAlignment: VerticalAlignment = .center // MARK: Overrides override var image: UIImage? { didSet { updateContentsRect() } } override func layoutSubviews() { super.layoutSubviews() updateContentsRect() } // MARK: Content layout private func updateContentsRect() { var contentsRect = CGRect(origin: .zero, size: CGSize(width: 1, height: 1)) guard let imageSize = image?.size else { layer.contentsRect = contentsRect return } let viewBounds = bounds let imageViewFactor = viewBounds.size.width / viewBounds.size.height let imageFactor = imageSize.width / imageSize.height if imageFactor > imageViewFactor { // Image is wider than the view, so height will match let scaledImageWidth = viewBounds.size.height * imageFactor var xOffset: CGFloat = 0.0 if case .left = horizontalAlignment { xOffset = -(scaledImageWidth - viewBounds.size.width) / 2 } else if case .right = horizontalAlignment { xOffset = (scaledImageWidth - viewBounds.size.width) / 2 } contentsRect.origin.x = xOffset / scaledImageWidth } else { let scaledImageHeight = viewBounds.size.width / imageFactor var yOffset: CGFloat = 0.0 if case .top = verticalAlignment { yOffset = -(scaledImageHeight - viewBounds.size.height) / 2 } else if case .bottom = verticalAlignment { yOffset = (scaledImageHeight - viewBounds.size.height) / 2 } contentsRect.origin.y = yOffset / scaledImageHeight } layer.contentsRect = contentsRect } }和foo引用findDOMNode？据我所知，this.refs.foo之后应该可以使用foo？我该怎么做才能做到这一点？（我正在使用React 15.2.1）

componentDidMount

JSBIN

Answer 1

@Alexander T的评论是正确的。

此外，访问DOM元素的推荐方法是使用回调引用。（阅读＆＃34;注意＆＃34;红色在这里：https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute）

E.g。拿走你的PageComp组件：

class PageComp extends React.Component {

  componentDidMount() {
     // use this.foo here at will
  }

  render() {
    return (
      <div>
        <WrapperComp>
          <div ref={(el) => this.foo = el}>item</div>
          <div>item</div>
        </WrapperComp>
      </div>
    );
  };
}

将this.foo设置为该元素，而不使用findDOMNode

Answer 2

"/|/groepsreizen fietsen|Stars/1"返回React Element。但是如果你想使用DOM元素 - 你需要找到这个节点

React 15.0.1需要以下语法：this.refs.foo

希望问题出现在tryNode2中？

您还可以在ReactDOM.findDOMNode(this.refs.foo)

下移动以下区域

class PageComp extends React.Component {

Answer 3

您可以使用if (newVale)查找组件呈现的DOM标记。您在另一个组件中使用this.refs

DOCS

在这个简单的例子中，在componentDidMount（）之后找不到使用findDOMNode（）的`ref`

3 个答案: