小编Vic*_*tor的帖子

我正在尝试在React中使用ES6类,并希望我的所有组件都继承某些方法,但是当我尝试扩展扩展React.Component类的组件时,componentDidMount方法不会触发,因此没有任何内容得到了.我正在使用的代码:

BaseComponent.jsx

import React from 'react';

class BaseComponent extends React.Component {

    constructor() {
        super();   
        console.log('BaseComponent constructor');
     }

     render() {
         return (
             <div>Hello, Im the base component</div>  
         );
     }
}

export default BaseComponent;

ExampleComponent.jsx

import BaseComponent from './BaseComponent';

class ExampleComponent extends BaseComponent {
     constructor(props) {

        super(props);
     }

     componentDidMount() {
         console.log('exampleComponent mounted');
     }

    render() {
        return (
            <div>Hello, Im the example component</div>  
        );
    }
}

export default ExampleComponent;

App.jsx

import React from 'react';
React.render(<ExampleComponent />, document.body);

我正在使用React 0.13.3,并使用babelify 6.1.2进行转换.

字符串'exampleComponent mounted'永远不会记录到控制台,也不会呈现任何内容.我有什么想法我做错了吗？

解决了,请参阅下面的更新.您可以使用此代码作为参考来实现simillar

假设我有一个父反应组件(ES6):

亲

import ChildDiv from './ChildDiv'

export default React.createClass({
  displayName: 'ParentDiv',

  getInitialState () {
    nodesLoadedToCanvas: 0,
    workedOnParentOnceAfterAllChildrenWereLoaded: false
  },

  onChildNodeDidMount () {
    let nodeCount = this.state.nodesLoadedToCanvas + 1
    this.state.nodesLoadedToCanvas = nodeCount
    console.log('Mount ' + this.state.nodesLoadedToCanvas + ' nodes so far')
  },

  render () {
    const {children} = this.props // 'children' is a model collection

    return (
      <div id='ParentDiv'>
      {children.map((childDiv) => 
        <ChildDiv data={childDiv} key={childDiv.id} onRender={this.onChildNodeDidMount}/>
      )}
      </div>
    )
  },

  componentDidMount () {
    console.log('Parent did mount')
  },

  componentDidUpdate () …

假设我有一个看起来像这样的组件:

var React = require('react/addons');

var ExampleComponent = React.createClass({
    test : function () {
        return true;
    },
    render : function () {
        var test = this.test();
        return (
            <div className="test-component">
                Test component - {test}
            </div>
        );
    }
});

module.exports = ExampleComponent;

在我的测试中,我可以使用这个组件来渲染这个组件TestUtils,然后如下所示:

var renderedComponent = TestUtils.renderIntoDocument(<ExampleComponent/>);
sinon.stub(renderedComponent, 'test').returns(false);
expect(renderedComponent.test).toBe(false); //passes

但有没有一种方法可以告诉Sinon每次创建该组件的实例时都会自动删除组件的功能？例如:

sinon.stubAll(ExampleComponent, 'test').returns(false); //something like this
var renderedComponent = TestUtils.renderIntoDocument(<ExampleComponent/>);
expect(renderedComponent.test).toBe(false); //I'd like this to pass

如果这是不可能的,是否有一个潜在的解决方案接近提供我正在寻找的功能？

我读到了如何将a插入unique_ptr<T>到vector<unique_ptr<T>>:为什么我不能将unique_ptr push_back到向量中？

但是我如何获得一个元素呢？我做了一个例子:

#include <memory>
#include <vector>

class A {
  public:
    A(int x, int y){
      x_ = x;
      y_ = y;
    }
  private:
    int x_;
    int y_;
};


int main(){
  std::vector<std::unique_ptr<A>> vec_a;
  std::unique_ptr<A> tmp_a = std::unique_ptr<A>(new A(13,32));

  vec_a.push_back(std::move(tmp_a));

  vec_a.push_back(std::unique_ptr<A>(new A(3,2)));

  // error
  std::unique_ptr<A> a = vec_a.at(0);
}

我收到此错误消息:

main.cc: In function ‘int main()’:
main.cc:24:36: error: use of deleted function 
      ‘std::unique_ptr<_Tp, _Dp>::unique_ptr(const std::unique_ptr<_Tp, _Dp>&) 
      [with _Tp = A; _Dp = std::default_delete<A>]’
   std::unique_ptr<A> a = vec_a.at(0);
                                    ^ …

我正在使用react-bootstrap来启动模态表单.

为此,我在我调用的产品组件中创建了一个模态组件PopupForm,一个表单组件ProductForm,一个产品组件

<ModalTrigger 
    modal={<PopupForm form={<ProductForm ref="pform" data={this.props.prod_data} />}/>}>
       <Button bsStyle='primary' bsSize='small' style={{marginRight:'5px'}} >
            <span className="glyphicon glyphicon-pencil" />
       </Button>
</ModalTrigger>

PopupForm:

var PopupForm = React.createClass({
    render: function(){
        return (
            <Modal {...this.props} bsStyle='primary' 
                   style={{width:200}} title='Edition' animation={false}>
            <div className='modal-body'>
                {this.props.form}
            </div>
            <div className='modal-footer'>
              <Button onClick={this.props.form.submit()}>Editer</Button>
              <Button onClick={this.props.onRequestHide}>Close</Button>
            </div>
          </Modal>
        )
    }
});

在此onClickEditer,我想调用的方法submit中的ProductForm组成部分,该ProductForm部分被发送到PopupForm的道具的形式,我展示它是这样{this.props.form},但我不能调用该方法{this.props.form.submit()} 其实我想使用的模式按钮如果不可能触发ProductForm方法,我将在ProductForm中使用提交按钮.

这是我的ProductForm:

var ProductForm = React.createClass({

    componentDidMount: function() {
        this.props.submit …

我正在使用

1. 反应:申请
2. npm:包经理
3. mocha/chai/sinon:单元测试
4. 量角器:e2e测试

在我的申请中.整个应用程序是用ES6编写的,但e2e测试是普通的javascript.我也想为我的e2e测试文件使用ES6样式,但我面临的问题是预处理或编译ES6文件到普通的javascript,然后运行量角器agains编译的文件.任何人都可以请指出如何使用webpack与babel将这些ES6文件转换为普通的javascript？

这是我的protractor.conf.js:

/*eslint-disable no-var*/
'use strict';

exports.config = {
  specs: ['../tests/e2e/**/*.js'],
  capabilities: {
    browserName: 'chrome'
  },
  baseUrl: 'http://localhost:3000',
  frameworks: ['mocha', 'chai'],
  onPrepare: function() {
    browser.ignoreSynchronization = true;
  }
};

一个简单的测试:

/*eslint-disable no-var*/
'use strict';

var chai = require('chai');
var sinon = require('sinon');
var sinonChai = require('sinon-chai');

var expect = chai.expect;
chai.use(sinonChai);

describe('app login flow', function() {

  var loginUrl, homeUrl;

  it('sets up initial variables', function() {
    browser.get('/teams');
    loginUrl = browser.getCurrentUrl();

    browser.sleep(6000).then(function() {
      homeUrl = …

我目前正在尝试在我的node.js + express build中实现一个同构反应组件.但是,当我尝试将所述组件包含到我的jade模板中进行渲染时,我收到此错误:TypeError:无法添加属性上下文,对象不可扩展

这是我的路线文件:

var express = require('express');
var router = express.Router();


var React = require('react/addons'),
  ReactApp = React.createFactory(require('../../react/components/ReactApp'));

/* GET home page. */
router.get('/', function(req, res, next) {
  var reactAppEl = ReactApp();
  console.log(reactAppEl);
  var reactHtml = React.renderToString(reactAppEl);
  res.render('index', { reactOutput: reactHtml });
});

module.exports = router;

组件:

/** @jsx React.DOM */

var React = require('react/addons');

/* create factory with griddle component */
var Griddle = React.createFactory(require('griddle-react'));

var fakeData = require('../data/fakeData.js').fakeData;
var columnMeta = require('../data/columnMeta.js').columnMeta;
var resultsPerPage = …

我在OverlayTrigger里面有一个popover.

我把它定义为

const myOverlayTrigger = <ReactBootstrap.OverlayTrigger 
    placement='bottom' overlay={<ReactBootstrap.Tooltip>...</ReactBootstrap.Tooltip>}>
    {myContent}
  </ReactBootstrap.OverlayTrigger>;

然后我在我的一个元素中渲染它:

<li>{myOverlayTrigger}</li>

我想在内部渲染OverlayTrigger,<li>但它在内部渲染,如文档中所定义.我正在尝试使用容器属性在父级内部进行渲染<li>.

首先,我尝试将ID分配给<li>并将此ID作为字符串传递给container = ...(这不是最好的方法).

其次,我尝试创建其他元素<span></span>并将其渲染到内部

const c = <span></span>;
... container={c} ...
<li>{c} {myOverlayTrigger}</li>

我正在尝试使用formy-react来摆脱浏览器的默认验证逻辑,并且根据文档," formNoValidation "属性应该可以解决问题.但我无法让它发挥作用.

我究竟做错了什么？

var React = require('React');
var Formsy = require('formsy-react');
var Input = require('./forms/Input.js');

module.exports = React.createClass({
    render: function () {
        return (
           <Formsy.Form>
              <Input ref="phonenumber" id="phonenumber" value={this.state.phonenumber.value} name="phonenumber" required validations="isNumeric" validationError="Please provide a valid phone number" />
           </Formsy.Form>
        );
    }
});

Input.js

var Formsy = require('formsy-react');
var React = require('React');

module.exports = React.createClass({
    mixins: [Formsy.Mixin],

    changeValue: function (event) {
        this.setValue(event.currentTarget.value);
    },

    render: function () {
        var className = this.showRequired() ? 'required' : this.showError() ? 'error' : null; …