时间戳

首页 > 解决方案 > 每个页面的自定义 Jumbotron

reactjs - 每个页面的自定义 Jumbotron

问题描述

我正在尝试使我的 Jumbotron 特定于该页面。所以我在我的 App.js 中创建了用户类型数组，同时我在这个页面上发送了类型作为道具：

const userTypes = {
    individual: [
      {
        _id: '1',
        name: 'Individual',
        quote: 'Download the app to track your code',
      },
    ],
    broker: [
      {
        _id: '2',
        name: 'Broker',
        quote: 'Download the app to see all the drivers',
      },
    ],
    dealer: [
      {
        _id: '3',
        name: 'Dealer',
        quote: 'Download the app to do something else',
      }
    ],
  };
<Route exact path="/" component={Home} id={userTypes.individual._id} type={userTypes.individual.type} quote={userTypes.individual.quote}/>
          <Route exact path="/brokers" component={Broker} id={userTypes.broker._id} type={userTypes.broker.type} quote={userTypes.broker.quote}/>
          <Route exact path="/dealers" component={Dealer} id={userTypes.dealer._id} type={userTypes.dealer.type} quote={userTypes.dealer.quote}/>

所以我想做的是在主页、经纪人和经销商页面上显示报价属性。例如，在主页中，我将属性作为道具发送，所以这是我的主页：

function Home(props) {  
  const history = useHistory();  
    return (
  <Styles>
    <JumbotronClassic history={history} props={props}/>
      
  </Styles>
);
}

export default Home;

所以根据这里的道具，我期待在 Jumbotron 中看到报价，因为这是我的 Jumbotron：

const JumbotronClassic = (props) => {
  return (
    <div>
      <Jumbotron fluid>
        <Container fluid>
          <Row>
            <Col>{props.quote}</Col>
            <Col>
              <InstantQuote />
            </Col>
          </Row>
        </Container>
      </Jumbotron>
    </div>
  );
};

但不幸的是，我没有看到任何我期望的东西。所以我猜我在发送道具时做错了什么。你能检查一下，让我知道我做错了什么吗？

标签： reactjsreact-bootstrapreact-props

解决方案

那是因为id,type和quote被传递给Route组件，而不是你的componentprop 中指定的组件。如果您的Route组件是react-router-dom组件，请改用renderprop。

例如

<Route
  exact
  path="/"
  render={props => <Home {...props} id={userTypes.individual._id} type={userTypes.individual.type} quote={userTypes.individual.quote} />}
/>

推荐阅读