能否给出一个Container和Presentational组件的示例?
"以下是一个简单的示例:
javascript
// Presentational组件
import React from ""react"";
export default function ImageList({ images, onClick }) {
return images.map((img, i) => <img src={img} key={i} onClick={onClick} />);
}
// Container组件
import React from ""react"";
export default class ImageListContainer extends React.Component {
constructor() {
super();
this.state = { images: [] };
}
componentDidMount() {
fetch(""https://images.com"")
.then(res => res.json())
.then(({ images }) => this.setState({ images }));
}
handleClick() { /* ... */ }
render() {
return <ImageList images={this.state.images} onClick={this.handleClick} />;
}
}
在这个示例中,ImageList是Presentational组件,只负责渲染图片列表;而ImageListContainer是Container组件,负责从网络获取图片数据,并处理点击事件。"
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。