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

Question

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

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>

在其中一位 parent 中，我有:

<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" />

但是我的 props 搞乱了，所以我假设，由于我在一个组件中将这些作为多个 const 执行，然后导入，我必须在其他地方定义 props？

如果我将其作为一个整体进行，即一个文件用于 GenHero，另一个文件用于 CustHero，则 const 没有问题。我在这里做错了什么？是的，我正在查看这方面的文档。我这样做是因为每个组件不能有多个导出默认值。我是否缺少如何映射，即使因为我没有绑定(bind)函数，而是简单地添加一个样式元素，其中包含一些基于子组件所使用的组件的文本？

添加:

在第一个答案之后我仍然得到这个。还是有 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>