gpt4 book ai didi

javascript - react .js : removing a component

转载 作者:行者123 更新时间:2023-12-03 13:03:01 25 4
gpt4 key购买 nike

我对react.js还很陌生,所以非常感谢任何帮助。

我有这个:https://jsfiddle.net/rzjyhf91/

其中我制作了 2 个组件:图像和按钮。

目标是通过单击按钮删除图像,我使用 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 组件?

最佳答案

嗯,看来你应该重新考虑如何处理显示控件。 React 是关于独立组件的,因此,您不应该卸载由父组件安装的组件。相反,您应该使用通过 props 传递的回调来完成类似的操作。

您的实际实现将取决于您的用例,但可以使用的示例的更新版本位于:https://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);

关于javascript - react .js : removing a component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27227792/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com