React使用导入创建自己的组件问题

Question

我正在尝试为modal制作自己的组件。第一部分是模态，第二部分是标题。当我在App.js中添加这行<MyModal.MyModalTitle property='My header'/>时，我在控制台中得到了错误：

react.development.js？72d0:207警告：React.createElement:type无效--应为字符串(用于内置组件(或类/函数(用于复合组件(，但得到的却是：undefined。您可能忘记了从中定义的文件导出组件，或者您可能混淆了默认导入和命名导入。

区块报价检查App的渲染方法。在应用程序中(由Route创建(在路由中(由RouterMapping创建(在交换机中(由RouterMapping创建(在路由器中(由BrowserRouter创建(在浏览器中路由器(由RouterMapping创建(在路由器映射中

感谢您的帮助。

我的来源是：App.js

import React from 'react';
import logo from '../images/logo.svg';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import {Button} from 'react-bootstrap';
import MyAlert from './render/component/alert/MyAlert';
import MyModal from './render/component/modal/MyModal';
import {hidingAlertAfterTime} from './render/index.jsx';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
beers: [],
visibleAlert: false,
visibleModal: false
};
this.onDismissAlert = this.onDismissAlert.bind(this);
this.onDismissModal = this.onDismissModal.bind(this);
}
onDismissAlert() {
this.setState({visibleAlert: false});
}
onDismissModal() {
this.setState({visibleModal: false});
}
componentDidMount() {
this.loadBeersFromServer();
}
loadBeersFromServer() {
fetch('http://localhost:8084/api/good-beers', {
method: 'GET'
})
.then((response) => response.json())
.then((beers) => {
this.setState({
beers: beers
});
});
};
editItem(row) {
console.log('Product #', row.id);
this.setState({visibleModal: true});
}
deleteItem(row) {
const id = row.id;
fetch('http://localhost:8084/api/good-beers/' + id,
{method: 'GET'})
.then(
() => {
this.loadBeersFromServer();
this.setState({
visibleAlert: true,
alertText: 'Záznam "' + row.name + '" byl úspěšně smazán.',
alertColor: 'success',
}, hidingAlertAfterTime)
}
)
.catch(() => {
this.setState({
visibleAlert: true,
alertText: 'Záznam "' + row.name + '" se nepodařilo odstranit.',
alertColor: 'danger',
}, hidingAlertAfterTime)
});
}
cellButton(cell, row) {
return (
<div>
<Button
type="button" bsStyle="primary"
onClick={() =>
this.editItem(row)}>Edit</Button>
<Button
type="button" bsStyle="danger"
onClick={() =>
this.deleteItem(row)}>Delete</Button>
</div>
)
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo"/>
<h1 className="App-title">Wellcome to React</h1>
</header>
<MyAlert open={this.state.visibleAlert} toggle={this.onDismissAlert}
alert={{color: this.state.alertColor, text: this.state.alertText}}/>
<MyModal show={this.state.visibleModal} onHide={this.onDismissModal}>
<MyModal.MyModalTitle property='My header'/>
</MyModal>
<BootstrapTable data={this.state.beers} options={{noDataText: 'Zatím nebyl vložen žádný záznam'}}
version='4' striped={true} hover={true}>
<TableHeaderColumn dataField='id' isKey={true} dataSort width='20%'>ID</TableHeaderColumn>
<TableHeaderColumn dataField='name' dataSort>Pivo</TableHeaderColumn>
<TableHeaderColumn dataField='button' dataFormat={this.cellButton.bind(this)} width='10%'/>
</BootstrapTable>
</div>
);
}
}
export default App;

MyModal.jsx

import React from 'react';
import {Button, Modal} from 'react-bootstrap';
import MyModalTitle from './MyModalTitle';
class MyModal extends React.Component {
render() {
return <Modal
show={this.props.show}
onHide={this.props.onHide}
animation={false}
>
<Modal.Header style={{display: 'block'}} closeButton >
<MyModalTitle property={this.props.children} />
</Modal.Header>
<Modal.Body>
<h4>Text in a modal</h4>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.props.onHide}>Zavřít</Button>
</Modal.Footer>
</Modal>
}
}
export default MyModal;

MyModalTitle.jsx

import React from 'react';
import {Modal} from 'react-bootstrap';
class MyModalTitle extends React.Component {
render() {
const modal = this.props.property;
return (
<Modal.Title>{modal.props.property}</Modal.Title>
)
}
}
export default MyModalTitle;

Answer 1

MyModal.MyModalTitle未定义(您需要从MyModal导出MyModalTitle才能使用该语法(。在App.js中，您需要添加import MyModalTitle from './render/component/modal/MyModalTitle';，然后使用

<MyModalTitle property='My header'/>

而不是

<MyModal.MyModalTitle property='My header'/>

在CCD_ 7内。