ReactJS：我如何使用內部組件設置狀態？

Question

"use strict"; 

import React, { Component, PropTypes } from 'react'; 
import { FormattedNumber } from 'react-intl'; 
import $ from 'jquery'; 

const Increase = require('../Increase').default; 

class Quotation extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     last: undefined, 
     prevClose: undefined 
    }; 
    } 

    componentDidMount() { 
    this.loadFromServer(this.props.url); 
    setInterval((() => { 
     this.loadFromServer(this.props.url); 
    }).bind(this), this.props.pollInterval); 
    } 

    loadFromServer(url) { 
    $.ajax({ 
     url: url, 
     dataType: 'json', 
     cache: false, 
     success: function(data) { 
     this.setState({last: parseFloat(data.ticker.last)}); 
     this.setState({prevClose: parseFloat(data.ticker.prev_close)}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(url, status, err.toString()); 
     } 
    }); 
    } 

    number(n) { 
    if (n == undefined) { 
     return '...' 
    } 
    return (
     <FormattedNumber 
     value={n} 
     maximumFractionDigits={2} 
     minimumFractionDigits={2} 
     /> 
    ); 
    } 

    render() { 
    return (
     <div className="quotation"> 
     <div className="title">{this.props.children}</div> 
     <div className="last-price"> 
      {this.number(this.state.last)} 
     </div> 
     <Increase last={this.state.last} 
        prevClose={this.state.prevClose} /> 
     </div> 
    ); 
    } 
} 

Quotation.propTypes = { 
    url: PropTypes.string.isRequired, 
    pollInterval: PropTypes.number.isRequired, 
    children: PropTypes.string.isRequired 
}; 

Quotation.getDefaultProps = { 
}; 

export default Quotation; 

增加使用react-intl，下面是測試：

component = TestUtils.renderIntoDocument(
    <IntlProvider locale='en'> 
    <Quotation url="https://test.com" pollInterval={1000}> 
     BTC/CNY 
    </Quotation> 
    </IntlProvider> 
); 

it('quotation unloaded',() => { 
    const quotation = TestUtils.findRenderedDOMComponentWithClass(
    component, 'quotation' 
); 
    let lastPrice = TestUtils.findRenderedDOMComponentWithClass(
    component, 'last-price' 
); 
    quotation.setState({last: 1100, prevClose: 1000});// can't access it 
    expect(lastPrice.textContent).toEqual(1100); 
}); 

我測試我的reactJS組件。

因爲我用了react-intl。我必須使用IntlProvider來渲染它。

如何設置Quotation的狀態？

更新： 我用：

let quotation = TestUtils.findRenderedComponentWithType(
    component, Quotation 
); 

了Quotation和setState它。

卻得到了另一個錯誤：

https://github.com/yahoo/react-intl/issues/332#issuecomment-189394004

Answer 1

我沒有測試這種方法。只是猜測。您需要將className屬性設置爲組件。在你的例子中，你會發現DIV元素，而不是你的組件。請嘗試以下操作：

component = TestUtils.renderIntoDocument(
    <IntlProvider locale='en'> 
    <Quotation className="findme" url="https://test.com" pollInterval={1000}> 
     BTC/CNY 
    </Quotation> 
    </IntlProvider> 
); 

it('quotation unloaded',() => { 
    const quotation = TestUtils.findRenderedDOMComponentWithClass(
    component, 'findme' 
); 
    let lastPrice = TestUtils.findRenderedDOMComponentWithClass(
    component, 'last-price' 
); 
    quotation.setState({last: 1100, prevClose: 1000});// can't access it 
    expect(lastPrice.textContent).toEqual(1100); 
}); 

它工作嗎？