javascript - React 和 ES6 继承

coder 2024-07-24 原文

注意:这篇文章是在 React 不支持 ES6 (v12) 时发布的。

我有一个 ES6 类:

class BaseClass {
  getInitialState(){
      return {message: 'Hello!'};
  }

  render() {
      return (
            <div>
                <div>{this.state.message}</div>
            </div>
        )
  }
}

我可以使用这个表达式在 ES6 中导出(来源:react ES6 browserify)

export default React.createClass(BaseClass.prototype)

这很好用。现在我想使用 ES6 继承来扩展我的 BaseClass 类:

class ExtendedClass extends BaseClass{
    getInitialState(){
        return {message: "Hello! I'm an extension"};
    }
}

但是当我在 ExtendedClass 类上调用 React.createClass 时，出现以下异常:

Invariant Violation: ReactCompositeComponentInterface: You are attempting to define `constructor` on your component more than once. This conflict may be due to a mixin.

我知道 React 0.13 应该对 ES6 更友好，但有什么办法可以解决这个问题吗？

编辑:

我正在使用 Traceur 编译我的 ES6 类。 ExtendedClass 的输出如下:

function ExtendedClass() {
  "use strict";
  if (BaseClass !== null) {
    BaseClass.apply(this, arguments);
  }
}
for (BaseClass____Key in BaseClass) {
    if (BaseClass.hasOwnProperty(BaseClass____Key)) {
      ExtendedClass[BaseClass____Key] = BaseClass[BaseClass____Key];
    }
  }
  ____SuperProtoOfBaseClass = BaseClass === null ? null : BaseClass.prototype;
  ExtendedClass.prototype = Object.create(____SuperProtoOfBaseClass);
  ExtendedClass.prototype.constructor = ExtendedClass;
  ExtendedClass.__superConstructor__ = BaseClass;
  ExtendedClass.prototype.getInitialState = function() {
    "use strict";
    return {message: "Hello! I'm an extension"};
  };
  React.createClass(ExtendedClass.prototype);

最佳答案

有一篇关于在 ES6 中编写 ReactJS 的好文章。

http://ilikekillnerds.com/2015/02/developing-react-js-components-using-es6/

无论如何，当你使用 ES6 时，你不会使用 React.createClass。你只需创建扩展 React.Component 的类

同样在 ES6 中你没有 getInitialState 而不是 defaultProps。它被替换为在构造函数中使用 this.state。

查看此示例。假设您有 Card 组件和扩展 Card 组件的欢迎面板。

代码如下:

卡片组件:

import React , { Component } from 'react'
class Card extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div className="card">
           <div className="card__content">
             <label>{this.props.content}</label>
           </div>
      </div>
      )
  }

  initPanel(el,content){
    React.render( <Card content={content} />, el);   
  }
}

export default Card;

欢迎面板组件:

import React from 'react';
import Card from 'components/card.component';

class WelcomePanel extends Card {
  constructor(props){
    super(props);
    this.state = {
      content: "Welcome Panel",
      index: 0
    }
  }

  componentClicked(){
    this.setState({content: "Component Clicked", index: this.state.index + 1})
  }

  render() {
    return (
      <div className="welcome-panel" onClick={this.componentClicked.bind(this)}>
         <Card content={`${this.state.content} ${this.state.index > 0 ? this.state.index  : ''} ${this.state.index > 0 ? 'times' : ''} `} />
      </div>
      )
  }

  initPanel(el,content){
    React.render( <WelcomePanel />, el);   
  }
}

export default { Class: WelcomePanel }

关于javascript - React 和 ES6 继承，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27233491/

有关javascript - React 和 ES6 继承的更多相关文章

使用canal同步MySQL数据到ES - 2
文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co
ruby-on-rails - Rails 单表继承 : How to override the value written to the type field - 2
在我的系统中，我已经定义了STI。Dog继承自Animal，在animals表中有一个type列，其值为"Dog"。现在我想让SpecialDog继承自dog，只是为了在某些特殊情况下稍微修改一下行为。数据还是一样。我需要通过SpecialDog运行的所有查询，以返回数据库中类型为Dog的值。我的问题是因为我有一个type列，rails将WHERE"animals"."type"IN('SpecialDog')附加到我的查询中，所以我不能获取原始的Dog条目。所以我想要的是以某种方式覆盖rails在通过SpecialDog访问数据库时使用的值，使其表现得像Dog。有没有办法覆盖用于类型
ES基础入门 - 2
ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear
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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby-on-rails - 为什么 DataMapper 使用混合与继承？ - 2
所以我只是对此感到好奇:DataMapper为其模型使用混合classPostincludeDataMapper::Resource虽然active-record使用继承classPost有谁知道为什么DataMapper选择这样做(或者为什么AR选择不这样做)？最佳答案它允许您从另一个不是DM类的类继承。它还允许动态地将DM功能添加到类中。这是我正在处理的模块中的类方法:defdatamapper_classklass=self.dupklass.send(:include,DataMapper::Resource)klass
ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2
我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？最佳答案尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几
ruby-on-rails - Ruby on Rails 单表继承(STI)和单元测试问题(使用 PostgreSQL) - 2
我正在使用带有单个“帐户”表的STI模型来保存用户和技术人员的信息(即用户...8)错误:test_the_truth(用户测试):ActiveRecord::StatementInvalid:PGError:ERROR:关系“技术人员”不存在:从“技术人员”中删除...从本质上讲，标准框架不承认Technicians和Users表(或PostgreSQL称它们为“关系”)不存在，事实上，应该别名为Accounts。有什么想法吗？我对RoR比较陌生，不知道如何解决这个问题而又不完全删除STI。最佳答案原来问题是由于存在:./te
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
ruby - 为什么 Ruby 模块继承不像类继承那样工作？ - 2
假设我有一个名为Flight的模块，其中包含类方法和实例方法。我可以使用include、extend或两者将其方法放入类中:classBatinclude会将Flight添加到Bat.ancestors，但extend不会。我的问题是，为什么模块与类不同？当我对Mammal进行子类化时，我总是同时获得类和实例方法。然而，当我混入一个模块时，我不能同时获得类和实例方法(除非我使用self.included钩子(Hook)或类似ActiveSupport::Concern的东西)。这种差异背后是否存在语言设计问题？最佳答案 Modul
ruby - 为什么 Object 在 Ruby 中既包含内核又继承它？ - 2
在Ruby(1.8.X)中为什么Object既继承了内核又包含了内核？仅仅继承还不够吗？irb(main):006:0>Object.ancestors=>[Object,Kernel]irb(main):005:0>Object.included_modules=>[Kernel]irb(main):011:0>Object.superclass=>nil请注意，在Ruby1.9中情况类似(但更简洁):irb(main):001:0>Object.ancestors=>[Object,Kernel,BasicObject]irb(main):002:0>Object.included

javascript - React 和 ES6 继承

有关javascript - React 和 ES6 继承的更多相关文章

随机推荐