jjzjj

javascript - react : Why is `this.props.children` undefined?

coder 2024-07-22 原文

我正在使用 ReactJS 构建电子电阻计算器。我有一个这样声明的组合组件:

var ResistanceCalculator = React.createClass({
    getInitialState: function() {
        return {bands: [0,0,0,0,0]}
    },
    componentDidMount: function() {
        console.log(this.props.children); // => undefined
    },
    render: function() {
        return (
            <div>
                <OhmageIndicator bands={this.state.bands} />
                <SVGResistor bands={this.state.bands} />
                <BandSelector band={1} />
                <BandSelector band={2} />
                <BandSelector band={3} />
                <BandSelector band={4} />
                <BandSelector band={5} />
            </div>
         );
    }
});

BandSelector 呈现 <select>元素和当一个改变时我想更新 ResistanceCalculator的状态。所以我的想法是我需要将事件监听器绑定(bind)到 ResistanceCalculator children 。然而this.props.children似乎是空的。这是为什么？

最佳答案

经验法则是:this.props 中的所有内容都是从父级传递给您的。 所以你使用 this.props.children 的方式不对。如果我有这样的东西:

<Todos><div /><div /></Todos>

然后，对于 Todos 组件，this.props.children 将是 divs 的数组。

你想要的是简单的回调(working example):

/** @jsx React.DOM */
var ResistanceCalculator = React.createClass({
  getInitialState: function() {
      return {bands: [0,0,0,0,0]};
  },

  handleBandSelectionChange: function(bandIndex, newValue) {
    // for the sake of immutability, clone the array here
    var bands = this.state.bands.slice(0);
    bands[bandIndex] = newValue;
    console.log(bandIndex, newValue); // yep, seems to work
    this.setState({bands: bands});
  },

  render: function() {
    return (
      <div>
        <OhmageIndicator bands={this.state.bands} />
        {
          this.state.bands.map(function(value, i) {
            return (
              <BandSelector band={i} onChange={this.handleBandSelectionChange}/>
            );
          }, this)
        }
      </div>
    );
  }
});

var BandSelector = React.createClass({
  handleChange: function(e) {
    if (this.props.onChange)
      this.props.onChange(this.props.band, e.target.value);
  },

  render: function() {
    return (
      <select onChange={this.handleChange}>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    );
  }
});

我从 select 中监听常规的 onChange 事件，然后在处理程序中调用我父级的处理程序 (handleBandSelectionChange)。请注意，对于父级 (ResistanceCalculator)，事件不必是 onChange；它可以是任何名字，只要 child 叫它。将它命名为 onChange 会更好一些。

作为旁注，this.props.children 用于包装器组件，这些组件希望在自己完成一些工作的同时透明地呈现其内容。

关于javascript - react : Why is `this.props.children` undefined?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20898401/

javascriptundefinedcodethisbandsreactjs

有关javascript - react : Why is `this.props.children` undefined?的更多相关文章

  1. ruby-on-rails - Rails 中的 NoMethodError::MailersController#preview undefined method `activation_token=' for nil:NilClass - 2

    似乎无法为此找到有效的答案。我正在阅读Rails教程的第10章第10.1.2节，但似乎无法使邮件程序预览正常工作。我发现处理错误的所有答案都与教程的不同部分相关，我假设我犯的错误正盯着我的脸。我已经完成并将教程中的代码复制/粘贴到相关文件中，但到目前为止，我还看不出我输入的内容与教程中的内容有什么区别。到目前为止，建议是在函数定义中添加或删除参数user，但这并没有解决问题。触发错误的url是http://localhost:3000/rails/mailers/user_mailer/account_activation.http://localhost:3000/rails/mai

  2. ruby - 使用 rbenv 和 ruby​​-build 构建 ruby​​ 失败，出现 undefined symbol : SSLv2_method - 2

    我正在尝试在配备ARMv7处理器的SynologyDS215j上安装ruby​​2.2.4或2.3.0。我用了optware-ng安装gcc、make、openssl、openssl-dev和zlib。我根据README中的说明安装了rbenv(版本1.0.0-19-g29b4da7)和ruby​​-build插件。.这些是随optware-ng安装的软件包及其版本binutils-2.25.1-1gcc-5.3.0-6gconv-modules-2.21-3glibc-opt-2.21-4libc-dev-2.21-1libgmp-6.0.0a-1libmpc-1.0.2-1libm

  3. ruby - "undefined method"用于 rails 模型 - 2

    我正在使用带有Rails的Devise，我想添加一个方法“getAllComments”，所以我这样写:classUser在我的Controller中:defdashboard@user=current_user@comments=@user.getAllComments();end当我访问我的url时，我得到了undefinedmethod`getAllComments'for#我做错了什么？谢谢 最佳答案 因为getAllComments是一个类方法，而您正试图将其作为实例方法访问。您要么需要访问它:User.getAllCom

  4. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 你会如何在 Ruby 中表达成语 "with this object, if it exists, do this"？ - 2

    在Ruby(尤其是Rails)中，您经常需要检查某物是否存在，然后对其执行操作，例如:if@objects.any?puts"Wehavetheseobjects:"@objects.each{|o|puts"hello:#{o}"end这是最短的，一切都很好，但是如果你有@objects.some_association.something.hit_database.process而不是@objects呢？我将不得不在if表达式中重复两次，如果我不知道实现细节并且方法调用很昂贵怎么办？显而易见的选择是创建一个变量，然后测试它，然后处理它，但是你必须想出一个变量名(呃)，它也会在内存中

  6. ruby-on-rails - Rails - Carrierwave 进程抛出 ArgumentError : no images in this image list - 2

    在尝试实现应用auto_orient的过程之后!对于我的图片，我收到此错误:ArgumentError(noimagesinthisimagelist):app/uploaders/image_uploader.rb:36:in`fix_exif_rotation'app/controllers/posts_controller.rb:12:in`create'Carrierwave在没有进程的情况下工作正常，但在添加进程后尝试上传图像时抛出错误。流程如下:process:fix_exif_rotationdeffix_exif_rotationmanipulate!do|image|

  7. ruby-on-rails - Ruby "Undefined Method"用于类方法 - 2

    Ruby初学者努力简单地将这个@@people散列的值打印到控制台classPerson#haveafirst_nameandlast_nameattributewithpublicaccessorsattr_accessor:first_nameattr_accessor:last_name#haveaclassattributecalled`people`thatholdsanarrayofobjects@@people=[]#havean`initialize`methodtoinitializeeachinstancedefinitialize(first_name,last_

  8. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  9. ruby - Nokogiri:遇到 nil:NilClass 错误 "undefined method ‘text’” - 2

    我是程序员的新手，请原谅我的新手。所以我正在使用Nokogiri来抓取警方的犯罪记录。这是下面的代码:require'rubygems'require'nokogiri'require'open-uri'url="http://www.sfsu.edu/~upd/crimelog/index.html"doc=Nokogiri::HTML(open(url))putsdoc.at_css("title").textdoc.css(".brief").eachdo|brief|putsbrief.at_css("h3").textend我使用选择器小工具书签来查找日志(.brief)的C

  10. ruby-on-rails - "undefined method ` stub_request '"访问 RSpec 支持文件中的方法时 - 2

    我的Ruby-on-Rails项目中有以下文件结构，用于规范:/spec/msd/serviceservice_spec.rb/support/my_modulerequests_stubs.rb我的request_stubs.rb有:moduleMyModule::RequestsStubsmodule_functiondeflist_clientsurl="dummysite.com/clients"stub_request(:get,url).to_return(status:200,body:"clientsbody")endend在我的service_spec.rb我有:re

随机推荐