React子组件不呈现html

Question

使用 React 16，尝试创建一个子组件（一个简单的），由于某种原因，内部 html 不呈现，但组件标签在使用开发工具查看时会呈现。

我的组件代码是这样的：

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


    class custHero extends Component {
      render() {
        return (
          <div>
            <Jumbotron className="generalView">
              <h1 className="display-3">Customer and Partner Development</h1>
              <p className="lead">Stay connected with your customers with Moneyball and Immerse</p>
            </Jumbotron>
          </div>
        );
      }
    }

    export default custHero;

我将它带入其他视图/组件，例如：

import custHero from './jumboCustomer';

然后，我希望子组件在哪里呈现：

<custHero/>

它应该只是在子 div 中呈现组件内容。我在这里错过了什么？

我试图将此子组件引入的整个组件：

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import {
  Container,
    Jumbotron, Button, Form, FormGroup, Label, Input, FormText, Tooltip, Col, Row, Breadcrumb, BreadcrumbItem } from 'reactstrap';
import DatePicker from 'react-date-picker';
import Users from "./Users";
import './index.css';
import './ConnCust.css';
import custHere from 'jumboCustomer'

class ConnCustIm extends Component {

    state = {
        date: new Date(),
    }

    onChange = Date => this.setState({ Date })

  render() {
    return (
      <div>
        <Breadcrumb className="custBread" tag="nav">
            <BreadcrumbItem className="custBread" tag="a" href="#">Home</BreadcrumbItem>
            <BreadcrumbItem className="custBread" active>Connect with Customers</BreadcrumbItem>
        </Breadcrumb>
        <custHero />
        <Container fluid="true">
            <Form className="cenForm">
                <FormGroup>
                    <Label for="custName" className="inputHead">* Company Name</Label>
                    <Input type="textarea" name="custName" id="custName" placeholder="enter the name of the company you want to visit" />
                </FormGroup>
                <FormGroup>
                    <Label for="custTech" className="inputHead">* Technology</Label>
                    <Input type="text" name="custTech" id="custTech" placeholder="enter the technologies you want to see in action: OMS, Azure Stack, IoT" />
                </FormGroup>
                <FormGroup>
                    <Label for="custPurpose" className="inputHead">* Purpose</Label>
                    <Input type="textarea" name="custPurpose" id="custPurpose" placeholder="tell us what you want to see or learn" />
                </FormGroup>
                <FormGroup>
                    <Label for="custLocale" className="inputHead">Company Location</Label>
                    <Input type="text" name="custLocale" id="custLocale" placeholder="street address or city/state/country" />
                </FormGroup>
                <FormGroup>
                    <Label for="coNeed" className="inputHead">Companies</Label>
                    <Input type="text" name="coNeed" id="coNeed" placeholder="Boeing, Ford, General Electric" />
                </FormGroup>
                <FormGroup>
                    <Label for="coNeed" className="inputHead">Start Date for Visit</Label>
                    <DatePicker
                        onChange={this.onChange}
                        value={this.state.date}
                    />
                </FormGroup>
                <FormGroup tag="fieldset">
                <Label className="inputHead">Do you want customer onsite or remotely?</Label>
                    <FormGroup check>
                        <Label className="custList" check>
                            <Input type="checkbox" name="custVisitType" />
                            Onsite
                        </Label>
                    </FormGroup>
                    <FormGroup check>
                        <Label className="custList" check>
                            <Input type="checkbox" name="custVisitType" />
                            Remotely
                        </Label>
                    </FormGroup>
                </FormGroup>
                <FormGroup>
                    <Label for="custComments" className="inputHead">Comments</Label>
                    <Input type="textarea" name="custComments" id="custComments" placeholder="anything else do you want to tell us" />
                </FormGroup>
                <FormGroup>
                    <Button id="submitButton"><NavLink to="/ConfirmIm">Submit</NavLink></Button>
                </FormGroup>
            </Form>
        </Container>
      </div>
    );
  }
}

export default ConnCustIm;

非常感谢。

编辑：

将 child 更改为以下，它工作正常。

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">Customer and Partner Development test</h1>
    <p className="lead">Stay connected with your customers with Moneyball and Immerse</p>
  </Jumbotron>

Answer 1

我认为问题在于 react 组件应该以大写字母开头，否则它们会与 JSX 中的自定义 html 标签混淆。

请尝试像这样更新：class CustHero extends Component {、export default CustHero;、import CustHero from './jumboCustomer';、<CustHero/>。

您会注意到您正在使用的所有其他组件也都是大写的，即Jumbotron、Button、Row 等等。

附：此外，您的父组件现在似乎有一个错字：import custHere from 'jumboCustomer'。