Question

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

我的组件代码如下：

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;

非常感谢。

修改

将孩子改为以下，并且工作正常。

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

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

请尝试按以下方式更新：class CustHero extends Component {，export default CustHero;，import CustHero from './jumboCustomer';，<CustHero/>。

您可以注意到您使用的所有其他组件也是大写的，即Jumbotron，Button，Row等等。

P.S。此外，现在您的父组件中似乎存在拼写错误：import custHere from 'jumboCustomer'。

React子组件不呈现html

1 个答案: