将prop变量添加到React子组件的直接方法

Question

因此，如果我正在创建一个具有不同道具的子组件，如下面的代码所示：

import React, { Component } from "react";
import {
  Container,
  Jumbotron,
  Button,
  Col,
  Row } from 'reactstrap';
import './jumbo.css';
import './index.css';


export const CustHero = () =>
  <Jumbotron className="customerView">
    <h1 className="display-3">{this.props.group} Customer Connection</h1>
    <p className="lead">{this.props.leadtext}</p>
  </Jumbotron>

  export const GenHero = () =>
  <Jumbotron className="generalView">
    <h1 className="display-3">{this.props.group} Customer Connection</h1>
    <p className="lead">{this.props.leadtext}</p>
  </Jumbotron>

在一位家长中，我有：

<CustHero group="Immerse" leadtext="Help the Immerse team organize an onsite customer visit for you and your team" />

然后在另一个我有：

而在另一个我有：

<GenHero group="Immerse" leadtext="Help the Immerse team organize an onsite customer visit for you and your team" />

但我的道具搞砸了，所以我假设因为我在一个组件中进行多个const然后导入，我必须在别处定义道具？

如果我将其作为一个整体，即一个文件用于GenHero，然后另一个用于CustHero，则const没有问题。我在这做错了什么？是的，我正在研究这方面的文档。我是这样做的，因为每个组件不能有多个export default。虽然因为我没有绑定一个函数，但我简单地添加了一个基于该子元素所使用的组件的文本的样式元素，我是否遗漏了如何使用map？

增加：

我在第一个答案之后仍然得到了这个。仍有props的东西：

Answer 1

export const CustHero = (props) =>
  <Jumbotron className="customerView">
    <h1 className="display-3">{props.group && props.group} Customer Connection</h1>
    <p className="lead">{props.leadtext && props.leadtext}</p>
  </Jumbotron>

  export const GenHero = (props) =>
  <Jumbotron className="generalView">
    <h1 className="display-3">{props.group && props.group} Customer Connection</h1>
    <p className="lead">{props.leadtext && props.leadtext}</p>
  </Jumbotron>