2014-09-11 70 views
8

React.js'nin bazı temel bölümlerini yanlış anladım. Bir tepki bileşen setstate gibi yöntemler vardır http://facebook.github.io/react/docs/component-api.htmlreact.js ReactComponent setState() sunmuyor mu?

diyor olarak

,().

Ama bunu yaparken:

var MyComp = React.createClass({ 

    getInitialState: function() { 
     return {dummy: "hello"}; 
    }, 

    render: function() { return React.DOM.h1(null, this.state.dummy + ", world!") } 
} 

var newComp = MyComp(null); 

React.renderComponent(newComp, myDomElement); 
MyComp.setState({dummy: "Good Bye"}); // Doesn't work. setState does not exist 
newComp.setState({dummy: "Good Bye"}); // Doesn't work either. setState does not exist 

bulunacak bir setState() yöntemi yoktur. Ama dokümanlar içinde Bileşen API'sı diyor, bu yüzden burada neyi yanlış yapıyorum?

+0

göz at http://facebook.github.io/react/blog/2014/03/21/react- v0.10.html # klon-on-montaj. 'newComp' gerçekten bileşenin bir örneği değil, bir tanımlayıcıdır (' MyComp.setState' elbette çalışamaz çünkü 'MyComp' temelde "sınıf" dır). –

+1

AHHH. Yani, doktorlar yanlış. React.createClass bir bileşen örneği oluşturmaz, ancak React.renderComponent yapar. Bu mantıklı. – ghost23

+0

Dokümanlar, "MyComp (null)" ifadesinin, AFAIK bir noktada yaptığı bir örneği döndürmesi gerektiği anlamına gelir. Bunun nasıl güncellenmesi gerekip gerekmediğini kontrol edeceğim. –

cevap

12

Bu blog post ve this writeup'a göre, MyComp numaralı çağrı, artık bir örnek döndürmez, daha hafif bir tanımlayıcı döndürür.

Karşıtı kalıbı:

var MyComponent = React.createClass({ 
    customMethod: function() { 
    return this.props.foo === 'bar'; 
    }, 
    render: function() { 
    } 
}); 

var component = <MyComponent foo="bar" />; 
component.customMethod(); // invalid use! 

Doğru kullanım:

var MyComponent = React.createClass({ 
    customMethod: function() { 
    return this.props.foo === 'bar'; 
    }, 
    render: function() { 
    } 
}); 

var realInstance = React.renderComponent(<MyComponent foo="bar" />, root); 
realInstance.customMethod(); // this is valid