ReactJS轮播组件：根据URL请求匹配JSON对应轮播图背景

要实现根据URL路径展示对应Item的轮播，你需要结合React Router来获取URL参数，然后从你的Data数组中筛选出匹配的内容再渲染。下面是具体的实现步骤和代码修改：

1. 先安装React Router #

首先确保你已经安装了react-router-dom，如果没有的话，执行以下命令：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

2. 配置路由（在你的入口文件，比如index.js） #

需要用BrowserRouter包裹你的App，并设置路由规则，捕获URL中的Item名称：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import App from './public';

ReactDOM.render(
  <Router>
    <Routes>
      {/* 匹配xxx/Item1、xxx/Item2这类路径 */}
      <Route path="/:salaName" element={<App />} />
      {/* 根路径的默认提示 */}
      <Route path="/" element={<div>请访问类似 /Item1 的路径查看对应轮播</div>} />
    </Routes>
  </Router>,
  document.getElementById('root')
);

注：如果用的是React Router v5，语法会略有不同，把Routes换成Switch，element换成component或render即可。

3. 修改你的App组件，实现按需渲染 #

方案一：函数组件（推荐，React官方更推荐函数组件+钩子）

import React from 'react'
import { useParams } from 'react-router-dom';
import Carousel from './carousel'
import Buttons from './buttons'
import Data from './data';

function App() {
  // 从URL中获取当前的Item名称（比如Item1、Item2）
  const { salaName } = useParams();
  
  // 在Data数组中找到匹配的Item
  const targetItem = Data.find(item => item.sala === salaName);

  // 如果找不到匹配的Item，返回提示
  if (!targetItem) {
    return <div>未找到对应的轮播内容</div>;
  }

  return (
    <div id={targetItem.id} style={{height: '100%'}}>
      <Carousel loop auto widgets={[Buttons]} className="custom-class">
        { targetItem.slides.map((slide, index) => (
          // 记得加key属性，避免React渲染警告
          <p 
            key={index}
            style={{backgroundImage:`url(${slide.url})`,height: '100%'}}
          > 
            {slide.campanie}
          </p> 
        )) }
      </Carousel>
    </div>
  )
}
export default App;

方案二：类组件（如果你更习惯类组件写法）

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import Carousel from './carousel'
import Buttons from './buttons'
import Data from './data';

class App extends React.Component {
  render() {
    // 通过withRouter高阶组件获取URL参数
    const { salaName } = this.props.match.params;
    const targetItem = Data.find(item => item.sala === salaName);

    if (!targetItem) {
      return <div>未找到对应的轮播内容</div>;
    }

    return (
      <div id={targetItem.id} style={{height: '100%'}}>
        <Carousel loop auto widgets={[Buttons]} className="custom-class">
          { targetItem.slides.map((slide, index) => (
            <p 
              key={index}
              style={{backgroundImage:`url(${slide.url})`,height: '100%'}}
            > 
              {slide.campanie}
            </p> 
          )) }
        </Carousel>
      </div>
    )
  }
}
// 用withRouter包裹组件，让它能访问到路由相关的props
export default withRouter(App);

关键逻辑说明 #

• 获取URL参数：通过React Router的useParams（函数组件）或withRouter（类组件）来提取URL中的salaName（也就是Item1、Item2）。
• 筛选数据：使用Array.find()方法从你的Data数组中找到sala属性和URL参数匹配的条目。
• 按需渲染：只渲染筛选出来的Item对应的幻灯片，而不是全部渲染所有Item的轮播。
• 错误处理：当访问不存在的Item路径时，返回友好提示，避免页面崩溃。

内容的提问来源于stack exchange，提问作者Ion Popescu