jjzjj

javascript - react - 在不破坏封装的情况下访问 DOM

coder 2024-12-31 原文

是否有一种规范的方法可以在不破坏封装的情况下执行类似以下的操作？

import React, { Component, PropTypes } from 'react';

class Dashboard extends Component {
    constructor(props, context) {
        super(props, context);

        this.setRef = ::this.setRef;
    }
    componentDidMount() {
        const node = ReactDOM.findDOMNode(this.someRef);
        const newHeight = window.innerHeight - node.offsetTop - 30;
        node.style.maxHeight = `${newHeight}px`;
    }

    render() {
        return (
            <div id="some-element-id" ref={this.setRef}>
            </div>
        );
    }

    setRef(ref) {
        this.someRef= ref;
    }
}

ReactDOM.findDOMNode似乎是解决此问题的建议方法，但这仍然会破坏封装，并且文档在这方面有一个很大的危险信号。

最佳答案

您应该使用组件“state”来设置 style property react 元素，所以你只访问“真正的”DOM节点来计算高度，然后你更新状态，重新渲染组件。 React 组件现在具有与真实 DOM 节点相同的信息，因此它不应该破坏封装。

使用vanilla JS提供一个例子:

var Component = React.createClass({
    getInitialState: function(){
    return {
        style: {},
    }
  },
  componentDidMount: function(){
    var node = ReactDOM.findDOMNode(this);
    var newHeight = window.innerHeight - node.offsetTop - 30;
    this.setState({style: {backgroundColor: '#bbb', height: newHeight.toString() + 'px' }});
  },
  render: function(){
    return React.createElement('div', {style: this.state.style}, 'Height: ' + this.state.style.height);
  },
});

您可以看到它在 this fiddle 中运行.

关于javascript - react - 在不破坏封装的情况下访问 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36728716/

javascript破坏sectionstylethisreactjs

有关javascript - react - 在不破坏封装的情况下访问 DOM的更多相关文章

  1. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  2. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  3. ruby - 在不使用 RVM 的情况下在 Mac 上卸载和升级 Ruby - 2

    我最近决定从我的系统中卸载RVM。在thispage提出的一些论点说服我:实际上，我的决定是，我根本不想担心Ruby的多个版本。我只想使用1.9.2-p290版本而不用担心其他任何事情。但是，当我在我的Mac上运行ruby--version时，它告诉我我的版本是1.8.7。我四处寻找如何简单地从我的Mac上卸载这个Ruby，但奇怪的是我没有找到任何东西。似乎唯一想卸载Ruby的人运行linux，而使用Mac的每个人都推荐RVM。如何从我的Mac上卸载Ruby1.8.7？我想升级到1.9.2-p290版本，并且我希望我的系统上只有一个版本。 最佳答案

  4. ruby - 在什么情况下会使用 Sinatra 或 Merb？ - 2

    我正在学习Rails，对Sinatra和Merb知之甚少。我想知道您会在哪些情况下使用Merb/Sinatra。感谢您的反馈! 最佳答案 Sinatra是一个比Rails更小、更轻的框架。如果你想让一些东西快速运行，只需发送几个URL并返回一些简单的内容，就可以使用它。看看Sinatrahomepage;这就是启动和运行“Hello,World”所需的全部内容，而在Rails中，您需要生成整个项目结构、设置Controller和View、设置路由等等(我还没有有一段时间写了一个Rails应用程序，所以我不知道“Hello,World

  5. ruby - 是否可以在不实际发送或读取数据的情况下查明 ruby​​ 套接字是否处于 ESTABLISHED 或 CLOSE_WAIT 状态？ - 2

    s=Socket.new(Socket::AF_INET,Socket::SOCK_STREAM,0)s.connect(Socket.pack_sockaddr_in('port','hostname'))ssl=OpenSSL::SSL::SSLSocket.new(s,sslcert)ssl.connect从这里开始，如果ssl连接和底层套接字仍然是ESTABLISHED，或者它是否在默认值7200之后进入CLOSE_WAIT，我想检查一个线程几秒钟甚至更糟的是在实际上不需要.write()或.read()的情况下关闭。是用select()、IO.select()还是其他方法完成

  6. ruby-on-rails - 在这种情况下我如何模拟一个对象？没有明显的方法可以用模拟替换对象 - 2

    假设我在Store的模型中有这个非常简单的方法:defgeocode_addressloc=Store.geocode(address)self.lat=loc.latself.lng=loc.lngend如果我想编写一些不受地理编码服务影响的测试脚本，这些脚本可能已关闭、有限制或取决于我的互联网连接，我该如何模拟地理编码服务？如果我可以将地理编码对象传递到该方法中，那将很容易，但我不知道在这种情况下该怎么做。谢谢!特里斯坦 最佳答案 使用内置模拟和stub的rspecs，你可以做这样的事情:setupdo@subject=MyCl

  7. ruby - 在没有基准或时间的情况下用 Ruby 测量用户时间或系统时间 - 2

    因为我现在正在做一些时间测量，我想知道是否可以在不使用Benchmark类或命令行实用程序time的情况下测量用户时间或系统时间。使用Time类只显示挂钟时间，而不显示系统和用户时间，但是我正在寻找具有相同灵active的解决方案，例如time=TimeUtility.now#somecodeuser,system,real=TimeUtility.now-time原因是我有点不喜欢Benchmark，因为它不能只返回数字(编辑:我错了-它可以。请参阅下面的答案。)。当然，我可以解析输出，但感觉不对。*NIX系统的time实用程序也应该可以解决我的问题，但我想知道是否已经在Ruby中实

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. ruby - 如何更优雅地记下这三种情况？ - 2

    是否可以让这段代码更紧凑？我在这里错过了什么吗？ifvaluemax_ratemax_rateelsevalueend 最佳答案 这里有一些完全不同的东西:[min_rate,value,max_rate].sort[1] 关于ruby-如何更优雅地记下这三种情况？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/13309740/

  10. ruby - 在没有 root 的情况下安装 Jekyll - 2

    我想在共享服务器上建立一个jekyll博客。当我尝试安装Jekyll时，我得到“您没有写权限”。我该如何在没有root或sudo的情况下解决这个问题？更多细节:我在共享服务器上有空间，但没有根访问权限。我无法安装Ruby，尽管托管公司应我的要求安装了它。当我尝试安装Jekyll时我使用user@hosting.org[~]#geminstalljekyll这是我得到的回应:ERROR:Whileexecutinggem...(Gem::FilePermissionError)Youdon'thavewritepermissionsintothe/usr/lib/ruby/gems/1.

随机推荐