开发者社区 问答 正文

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

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

展开
收起
夹心789 2024-06-19 20:23:19 48 分享 版权
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
    赞同 展开评论
问答分类:
问答地址: