Thay đổi trạng thái của thành phần React từ Javascript bên ngoài cũ?

Question

Làm cách nào để tôi có thể thay đổi trạng thái của thành phần React từ mã jQuery cũ của mình Mã số của jQuery?

Tôi có một thành phần như thế này:

var AComponent = React.createClass({ 
    getInitialState: function() { 
    return { ids: [] } 
    }, 
    render: function() { 
    ... 
    }, 
    onButtonClick: function() { 
    ids.splice(…); // remove the last id 
    } 
}); 

Khi một cái gì đó đặc biệt xảy ra trong các mã súp cũ jQuery, tôi muốn đẩy một id để AComponent.state.ids. Làm thế nào tôi có thể làm điều đó?

Một giải pháp "hiển nhiên" là chống mẫu; ở đây là:

var componentInstance = AComtonent({}); 
React.renderComponent(componentInstance, document.getElementById(...)); 

// Somewhere else, in the jQuery soup. Something special happens: 
componentIntance.state.ids.push(1234); 
componentIntance.setState(componentInstance.state); 

Đây là một antipattern, theo this email from a Facebook developer, vì ông viết rằng componentInstance có thể bị phá hủy bởi phản ứng.

Answer 1

Tôi sẽ làm cho thành phần không trạng thái. Lưu trữ mảng ids bên ngoài thành phần của bạn và truyền nó như một nhánh với các hàm sẽ sửa đổi mảng. Xem ví dụ trên JSFiddle: http://jsfiddle.net/ohvco4o2/5/