Javascript 如何单击以查看详细组件

我有汽车和汽车的两个部件 我想在cars组件中显示所有汽车，并带有指向的超链接/链接，当用户单击时，应将carid（参数）传递给CardDetails组件

App.js

import React, { Component } from 'react';
import Cars from './components/Cars';
import CarDetails from './components/Car-details'
import {
BrowserRouter as Router,
Route,
Link
   } from 'react-router-dom'


class App extends Component {

 render() {
 const data = [
  {
      id: 1,
      name: 'Honda Accord Crosstour',
      year: '2017',
      model: 'Accord Crosstour',
      make: 'Honda'

  },
  {
      id: 2,
      name: 'Mercedes-Benz AMG GT Coupe',
      year: '2016',
      model: 'AMG',
      make: 'Mercedes Benz'


  }

 ];
return (

  <div className="App">


    <hr/>

    <Cars varCars={data}/>

   </div>


     );
  }
}

export default App;

import React，{Component}来自'React'；
从“./部件/汽车”进口汽车；
从“./components/Car details”导入卡片详情
进口{
BrowserRouter作为路由器，
路线,，
链接
}从“反应路由器dom”
类应用程序扩展组件{
render（）{
常数数据=[
{
id:1，
名称：“本田雅阁Crosstour”，
年份：2017年，
型号：“雅阁Crosstour”，
品牌：“本田”
},
{
id:2，
名称：“梅赛德斯-奔驰AMG GT双门轿车”，
年份：2016年，
型号：“AMG”，
品牌：“梅赛德斯-奔驰”
}
];
返回(

);
}
}
导出默认应用程序；

Cars.js 此组件在单击将调用时显示带有超链接的所有汽车 carnama.js显示特定汽车的详细信息

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
    } from 'react-router-dom';

  import Carnama from './Carnama'

 class Cars extends Component {

constructor(props) {
    super(props)
  }
render(){

    const cars = this.props.varCars;
    const carNode = cars.map((car) => {
        return (
            <Router>
                  <div>

                    <Link
                        to={{ pathname: '/Carnama/'+car.id}}
                        className="list-group-item"
                        key={car.id}>
                        {car.name}
                    </Link>

                    <Route path="/Carnama:id" component={Carnama}/>
                    </div>

            </Router>
        )
    });
    return (
        <div>
            <h1>Cars page</h1>
            <div className="list-group">
            {carNode}
            </div>
        </div>
    );
  }
 }

export default Cars;

import React，{Component}来自'React'；
进口{
BrowserRouter作为路由器，
路线,，
链接
}从“反应路由器dom”；
从“./Carnama”导入Carnama
类Cars扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
const cars=this.props.varCars；
常数carNode=cars.map（（car）=>{
返回(
{car.name}
)
});
返回(
汽车页面
{carNode}
);
}
}
出口默认汽车；

卡纳玛js 此组件显示传递的paramater car.id

import React, { Component } from 'react';

 class Carnama extends Component {
  render() {
    return (
        <div>
           <h1>Car Details</h1> 
        </div>
     );
    }
  }

 export default Carnama;

import React，{Component}来自'React'；
类Carnama扩展组件{
render（）{
返回(
汽车详情
);
}
}
出口信用卡；

我已经阅读并重新阅读了以下内容

---

您的问题在于此块：

const carNode = cars.map((car) => {
    return (
        <Router>
              <div>

                <Link
                    to={{ pathname: '/Carnama/'+car.id}}
                    className="list-group-item"
                    key={car.id}>
                    {car.name}
                </Link>

                <Route path="/Carnama:id" component={Carnama}/>
                </div>

        </Router>
    )
});

const carNode=cars.map（（car）=>{
返回(
{car.name}
)
});

Array.map将返回一个新的React组件数组，每个组件包装在一个

组件中。我还没有测试过它，所以我不确定它是否有效，但请尝试以下方法：

const carNode = cars.map((car, i) => {
    return (
              <div key={i}>
                <Link
                    to={{ pathname: '/Carnama/'+car.id}}
                    className="list-group-item"
                    key={car.id}>
                    {car.name}
                </Link>
              </div>
    )
});
return (
    <div>
        <h1>Cars page</h1>
        <div className="list-group">
        <Router>
        {carNode}
        <Route path="/Carnama:id" component={Carnama}/>
        </Router>
        </div>
    </div>
);

const carNode=cars.map（（car，i）=>{
返回(
{car.name}
)
});
返回(
汽车页面
{carNode}
);

让我检查一下，我做了两个更改1）{car.name}2）将所有内容包装在Cars页面中