react.js: xóa một thành phần

Question

Tôi khá mới ở react.js, vì vậy mọi trợ giúp đều được đánh giá cao.

Tôi có điều này: http://jsfiddle.net/rzjyhf91/

Trong đó tôi đã thực hiện 2 thành phần: một hình ảnh và một nút.

Mục đích là để loại bỏ các hình ảnh với một nhấp chuột vào nút, tôi sử dụng unmountComponentAtNode cho rằng, nhưng nó không hoạt động:

var App = React.createClass({ 
    render: function() { 
    return (
    <div><MyImage /><RemoveImageButton /></div> 
    ); 
    } 
}); 

var MyImage = React.createClass({ 
    render: function() { 
    return (
     <img id="kitten" src={'http://placekitten.com/g/200/300'} /> 
    ); 
    } 
}); 

var RemoveImageButton = React.createClass ({ 
    render: function() { 
    return (
     <button onClick={this.handleClick}>remove image</button> 
    ) 
    }, 
    handleClick: function(){ 
    React.unmountComponentAtNode(document.getElementById('kitten')); 
    } 
}); 

React.render(<App />, document.body); 

Làm thế nào tôi có thể loại bỏ một phản ứng thành phần từ các thành phần khác?

Answer 1

Vâng, có vẻ như bạn nên suy nghĩ lại cách điều khiển hiển thị được xử lý. Phản ứng là tất cả về các thành phần bị cô lập, và do đó, bạn không nên tháo gắn một thành phần được gắn bởi một thành phần cha. Thay vào đó, bạn nên sử dụng một cuộc gọi lại được truyền qua props để thực hiện điều gì đó tương tự.

thực hiện thực tế của bạn sẽ phụ thuộc vào trường hợp sử dụng của bạn, nhưng một phiên bản cập nhật của các ví dụ của bạn mà làm việc là tại địa chỉ: http://jsfiddle.net/nt99zzmp/1/

var App = React.createClass({ 
    render: function() { 
    var img = this.state.showImage ? <MyImage /> : ''; 
    return (
    <div>{img}<RemoveImageButton clickHandler={this.removeImage} /></div> 
    ); 
    }, 

    getInitialState: function() { 
     return { 
      showImage: true 
     }; 
    }, 

    removeImage: function() { 
     this.setState({ showImage: false }); 
    } 
}); 

var MyImage = React.createClass({ 
    render: function() { 
    return (
     <img id="kitten" src={'http://placekitten.com/g/200/300'} /> 
    ); 
    } 
}); 

var RemoveImageButton = React.createClass ({ 
    render: function() { 
    return (
     <button onClick={this.props.clickHandler}>remove image</button> 
    ) 
    } 
}); 

React.render(<App />, document.body); 

Answer 2

Về cơ bản loại bỏ một thành phần không có ý nghĩa trong phản ứng, có lẽ bạn vẫn nghĩ Các cách jQuery, về cơ bản trong tất cả các thư viện JavaScript hiện đại và mới bao gồm React, bạn nên quản lý thành phần của mình bằng cách sử dụng state hoặc route để xử lý những thứ này, việc xóa thành phần hoặc thành phần không phải là cách hay để làm những điều này trong React hoặc Angular chẳng hạn.

Ví dụ: bạn có thể có boolean trong trường hợp này và nếu đúng, hãy hiển thị hình ảnh của bạn, giấu hình ảnh hoặc thậm chí trả về một phần tử khác trong thành phần của bạn.

Vì vậy, trong trường hợp này, bạn có một thành phần mà sẽ trở lại khác nhau phụ thuộc vào props hoặc state ... một cái gì đó như thế này:

//// 
var MyImage = React.createClass({ 
    render: function() { 
    if(this.state.showImage) { 
     return (
     <img id="kitten" src={'http://placekitten.com/g/200/300'} /> 
    ); 
    } else { 
     return<p>no image!</p>; 
    } 
    } 
}); 
////