我是React.js的新手,因此非常感谢您的帮助。
我有这个:http : //jsfiddle.net/rzjyhf91/
其中我做了两部分:图像和按钮。
目的是通过单击按钮来删除图像,我unmountComponentAtNode为此使用了它,但是它不起作用:
unmountComponentAtNode
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);
如何从另一个组件中删除反应组件?
好吧,看来您应该重新考虑显示控件的处理方式。React只是关于孤立的组件,因此,您不应该卸载由父组件安装的组件。相反,您应该使用向下传递的回调props来完成类似的任务。
props
您的实际实现将取决于您的用例,但是可以运行的示例的更新版本位于: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);