react---父组件向子组件传参---fetch调接口父传子--demo

最新推荐文章于 2024-04-18 15:46:46 发布

咩有猫腻.

最新推荐文章于 2024-04-18 15:46:46 发布

阅读量178

点赞数

分类专栏： reactjs 三-框架类

本文链接：https://blog.csdn.net/DcTbnk/article/details/107674322

版权

三-框架类同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

reactjs

31 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<title>Document</title>
    <!-- 输入bs3-cdn:css -->
    <!-- Latest compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div id="app" class="container"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script type="text/babel">
      const { Component } = React;
      class Book extends Component {
        render() {
          const { book } = this.props;
          // bs3-card-background 输入这个 ，就能找到对应的bootstrap组件
          return (
            <div className="card text-white bg-primary">
              <img className="card-img-top" src={book.coverImg} alt="" />
              <div className="card-body">
                <h4 className="card-title">{book.title}</h4>
                <p className="card-text">{book.descriptions}</p>
              </div>
            </div>
          );
        }
      }
      class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            list: [],
          };
        }
        componentDidMount() {
          this.loadMore();
        }
        loadMore() {
          fetch("http://localhost:3009/api/v1/books")
            .then((res) => res.json())
            .then((res) => {
              this.setState({
                list: res.books,
              });
            });
        }
        render() {
          return (
            <div className="row">
              {this.state.list.map((book) => (
                <div key={book._id} className="col-md-4">
                  <Book book={book} />
                </div>
              ))}
            </div>
          );
        }
      }

      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>

如果想添加点击加载的按钮，可以按找下方代码修改

loadMore() {
          fetch("http://localhost:3009/api/v1/products?page=" + this.state.page)
            .then((res) => res.json())
            .then((res) => {
              console.log(res);
              this.setState({
                list: [...this.state.list, ...res.products],
                page: this.state.page + 1,
              });
            });
        }
        render() {
          const { list } = this.state;
          return (
            <div className="row">
              {list.map((item) => {
                return (
                  <div key={item._id} className="col-md-4">
                    <Product product={item} />
                  </div>
                );
              })}
              <button onClick={() => this.loadMore()}>点击加载更多</button>
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("app"));

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react---父组件向子组件传参---fetch调接口父传子--demo

<title>Document</title>   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> </head.
复制链接

扫一扫

专栏目录