使用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>
答案 0 :(得分:2)
我认为问题是反应组件应该以大写字母开头,否则它们会与JSX中的自定义html标签混淆。
请尝试按以下方式更新:class CustHero extends Component {
,export default CustHero;
,import CustHero from './jumboCustomer';
,<CustHero/>
。
您可以注意到您使用的所有其他组件也是大写的,即Jumbotron
,Button
,Row
等等。
P.S。此外,现在您的父组件中似乎存在拼写错误:import custHere from 'jumboCustomer'
。