时间戳

首页 > 解决方案 > 将参数传递给 React 路由器中的 React 元素

javascript - 将参数传递给 React 路由器中的 React 元素

问题描述

我创建了一个名为 Jobscard 的元素，它以 jobsList 作为参数。我还尝试使用 react-router 将此作业卡设置为路由器。

我已经调查了这个问题，他们在网络上似乎没有类似的问题，所有解决方案和指南都使用反应组件，但这不适用于反应元素。这可能吗？

import React from 'react';
import { projectList } from './projectList';
import JobsCard from './JobsCard';
import { jobsList } from './jobsList';
import CardList from './CardList';
import Ham from './hamburger';
import { Route, Switch } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
import jobsList from './jobsList'

const App = () => {
    return(

            <div className='blue1  center'>

                    <BrowserRouter>
                        <Ham />

                        <Switch>
                            <Route exact path="/" render{props => <JobsCard jobsList={jobsList}> </JobsCard> }/>

                           <Route path="/projects" component={<CardList projectList={projectList}/>}/> 
                        </Switch>
                    </BrowserRouter>


            </div>

  )
}

export default App;

JobsCard 元素是

import React from 'react';
import Job from './Job.js'

const JobsCard = ({jobsList}) => {
    const cardDraw = jobsList.map((proj, i) => {
        return <Job key={i} title={jobsList[i].title} 
        website={jobsList[i].website} description={jobsList[i].description} 
        logo={jobsList[i].logo} company={jobsList[i].company} years={jobsList[i].years}/>
    })
    return (
        <div className=" cf justify-center ma3">
                {cardDraw}


        </div>
    );
}

export default JobsCard;

工作列表看起来像这样

import energyxchain from ''
export const jobsList = [
    {   title: '',
        website: '',
        description: '',
        logo: ,
        company: '',
        years: '2018-2019'
    },
    {
        title: '',
        company: '',
        website: '',
        logo: '',
        description: '',
        years: '2017-2018'
    }];

我希望 jobsCard 成为一条路线。

标签： javascriptreactjsreact-router

解决方案

从路线渲染道具：

render，它采用内联函数，只有在必须将范围内变量传递给要渲染的组件时才应使用。

你不应该使用component带有内联函数的 prop来传递范围内的变量，因为你会得到不需要的组件卸载/重新安装。

所以你的路线应该是ff：

使用component道具（不应传递变量）：

<Route
  exact path="/"
  component={JobsCard}
/>

使用render道具：

<Route
  exact path="/"
  render={routeProps => (<JobsCard {...routeProps} jobsList={jobsList} />)}
/>

通常，您应该将导航与内部数据管理分开（使用 redux connect）。

推荐阅读