开发者社区> 问答> 正文

能否给出一个Container和Presentational组件的示例?

能否给出一个Container和Presentational组件的示例?

展开
收起
夹心789 2024-06-19 20:23:19 17 0
1 条回答
写回答
取消 提交回答
  • "以下是一个简单的示例:

    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组件,负责从网络获取图片数据,并处理点击事件。"

    2024-06-19 23:05:47
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载