草庐IT

javascript - ReactJs:改变状态以响应状态变化

coder 2024-07-30 原文

我有一个带有输入的 React 组件，以及一个可选的“高级输入”:

[ basic ]
Hide Advanced...
[ advanced ]

如果您单击“隐藏高级”，底部的高级将消失，这将更改为“显示高级”。这很简单并且工作正常，状态中有一个 showAdvanced 键控制文本以及是否呈现高级输入。

但是，外部 JS 代码可能会更改 advanced 的值，在这种情况下，如果 [advanced] 输入当前处于隐藏状态并且该值与默认值不同，我想显示它。但是，用户应该能够单击“隐藏高级”以再次将其关闭。

所以，有人外部调用cmp.setState({advanced: "20"})，然后我想显示高级；最直接的做法就是在我的状态下更新 showAdvanced。但是，似乎没有办法更新某些状态以响应 React 中的其他状态更改。我可以想到许多行为略有不同的解决方法，但我真的很想拥有这种特定行为。

我应该将 showAdvanced 移动到 props，这有意义吗？你能改变 Prop 以响应状态变化吗？谢谢。

最佳答案

好的，首先，您提到组件外部的第三方可能会调用 cmp.setState()？这是一个巨大的 react 禁忌。一个组件应该只调用它自己的 setState 函数——外面的任何东西都不应该访问它。

另外要记住的另一件事是，如果您尝试再次更改状态以响应状态更改 - 这意味着您做错了什么。

当您以这种方式构建事物时，它会使您的问题比需要的更难。原因是如果你接受没有任何外部事物可以设置你的组件的状态 - 那么基本上你唯一的选择就是允许外部事物更新你的组件的 Prop - 然后在你的组件内部对它们使用react。这简化了问题。

因此，例如，您应该考虑让过去调用 cmp.setState() 的任何外部事物再次调用您的组件上的 React.renderComponent，给出一个新 Prop 或 Prop 值，例如 showAdvanced 设置为 true。然后您的组件可以在 componentWillReceiveProps 中对此使用react并相应地设置它的状态。下面是一段代码示例:

var MyComponent = React.createClass({
    getInitialState: function() {
        return {
            showAdvanced: this.props.showAdvanced || false
        }
    },
    componentWillReceiveProps: function(nextProps) {
        if (typeof nextProps.showAdvanced === 'boolean') {
            this.setState({
                showAdvanced: nextProps.showAdvanced
            })
        }
    },
    toggleAdvancedClickHandler: function(e) {
        this.setState({
            showAdvanced: !this.state.showAdvanced
        })
    },
    render: function() {
        return (
            <div>
                <div>Basic stuff</div>
                <div>
                    <button onClick={this.toggleAdvancedClickHandler}>
                        {(this.state.showAdvanced ? 'Hide' : 'Show') + ' Advanced'}
                    </button>
                </div>
                <div style={{display: this.state.showAdvanced ? 'block' : 'none'}}>
                    Advanced Stuff
                </div>
            </div>
        );
    }
});

因此，当您第一次调用 React.renderComponent(MyComponent({}), elem) 时，组件将挂载并且高级 div 将被隐藏。如果您单击组件内的按钮，它将切换并显示。如果您需要强制组件从组件外部显示高级 div，只需像这样再次调用渲染:React.renderComponent(MyComponent({showAdvanced: true}), elem) 它将显示它，无论内部状态如何。同样，如果您想从外部隐藏它，只需使用 showAdvanced: false 调用它即可。

上述代码示例的额外好处是，在 componentWillReceiveProps 中调用 setState 不会导致另一个渲染周期，因为它会在 render 之前捕获并更改状态 被调用。查看此处的文档以获取更多信息:http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops

不要忘记在已经安装的组件上再次调用 renderComponent 不会再次安装它，它只是告诉 React 更新组件的 props 然后 React 将进行更改，运行生命周期并呈现组件的功能，并执行它的 dom 差异魔术。

关于javascript - ReactJs:改变状态以响应状态变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25798803/

javascriptReactJscodeshowAdvancedsectionstate

有关javascript - ReactJs:改变状态以响应状态变化的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby-on-rails - 跳过状态机方法的所有验证 - 2

    当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested

  3. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  4. ruby - 字符串文字中的转义状态作为 `String#tr` 的参数 - 2

    对于作为String#tr参数的单引号字符串文字中反斜杠的转义状态，我觉得有些神秘。你能解释一下下面三个例子之间的对比吗？我特别不明白第二个。为了避免复杂化，我在这里使用了'd'，在双引号中转义时不会改变含义("\d"="d")。'\\'.tr('\\','x')#=>"x"'\\'.tr('\\d','x')#=>"\\"'\\'.tr('\\\d','x')#=>"x" 最佳答案 在tr中转义tr的第一个参数非常类似于正则表达式中的括号字符分组。您可以在表达式的开头使用^来否定匹配(替换任何不匹配的内容)并使用例如a-f来匹配一

  5. ruby - Net::HTTP 获取源代码和状态 - 2

    我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。 最佳答案 在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur

  6. ruby-on-rails - 启用 Rack::Deflater 时 ETag 发生变化 - 2

    在启用Rack::Deflater来gzip我的响应主体时偶然发现了一些奇怪的东西。也许我遗漏了一些东西，但启用此功能后，响应被压缩，但是资源的ETag在每个请求上都会发生变化。这会强制应用程序每次都响应，而不是发送304。这在没有启用Rack::Deflater的情况下有效，我已经验证页面源没有改变。我正在运行一个使用thin作为Web服务器的Rails应用程序。Gemfile.lockhttps://gist.github.com/2510816有没有什么方法可以让我从Rack中间件获得更多的输出，这样我就可以看到发生了什么？提前致谢。 最佳答案

  7. ruby-on-rails - 为模型创建状态属性 - 2

    我想为我的Task模型创建一个status属性，该属性将按以下顺序指示它在三部分进度中的位置:打开=>进行中=>完成。它的工作方式类似于亚马逊包裹的交付方式:已订购=>已发货=>已交付。我想知道设置此属性的最佳方法是什么。我可能是错的，但创建三个独立的bool属性似乎有点多余。实现此目标的最佳方法是什么？ 最佳答案 Rails4有一个内置的enummacro.它使用单个整数列并映射到键列表。classOrderenumstatus:[:ordered,:shipped,:delivered]end状态映射如下:{ordered:0,

  8. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2

    在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  9. 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()还是其他方法完成

  10. ruby - 改变替换的大小写 - 2

    我有以下内容:text.gsub(/(lower)(upper)/,'\1\2')我可以将\2替换为大写吗？类似于:sed-e's/\(abc\)/\U\1/'这在Ruby中可行吗？ 最佳答案 查看gsub文档:str.gsub(模式){|匹配|block}→new_str在block形式中，当前匹配字符串作为参数传入，$1、$2、$`、$&、$'等变量将被适当设置。block返回的值将替换为每次调用的匹配项。"alowerupperb".gsub(/(lower)(upper)/){|s|$1+""+$2.upcase}

随机推荐