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

最新推荐文章于 2025-10-01 00:47:51 发布

原创

最新推荐文章于 2025-10-01 00:47:51 发布 · 6.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react-js

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

知识点总结

本地图片路径加载
组件的两种形式方法组件类组件
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(

最低0.47元/天解锁文章