reactjs 编写一个简单的图片轮播图

最新推荐文章于 2023-03-08 16:21:51 发布

abundantstudy

最新推荐文章于 2023-03-08 16:21:51 发布

阅读量6.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react-js 文章标签： react-js

本文链接：https://blog.youkuaiyun.com/abundantstudy/article/details/78819654

这篇博客是ReactJS初学者的学习记录，主要讲解如何编写一个简单的图片轮播图。涉及内容包括本地图片加载、组件（方法组件和类组件）、prop与state的使用、已废弃的createClass、create-react-app的脚手架搭建、React获取DOM节点的方法以及常见的文件结构。作者在实践中遇到了使用ref获取DOM报错和传递数组作为props的问题，并提供了参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识点总结

本地图片路径加载
组件的两种形式方法组件类组件
prop state
createClass 已废弃
create-react-app 脚手架
react 获取DOM 节点

文件结构
这里写图片描述

App.js 代码

import React, { Component } from 'react';
import './App.css';

//方法Btns组件
function Btns() {
  return (
    <ul id="btns">
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
  );
}

//方法Imgs 组件
function Imgs() {
  return (
    <ul id="imgs">
        <li><img alt="图片1" src={require('./images/banner1.jpg')} /></li>
        <li><img alt="图片1" src={require('./images/banner2.jpg')} /></li>
        <li><img alt="图片1" src={require('./images/banner3.jpg')} /></li>
        <li><img alt="图片1" src={require('./images/banner4.jpg')} /></li>
        <li><img alt="图片1" src={require('./images/banner5.jpg')} /></li>
        <li><img alt="图片1" src={require(