添加支柱变量以响应子组件的直接方法

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>