Question

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

react.development.js？72d0：207警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。

Blockquote   检查App的渲染方法。       在应用中（按路线创建）       在路由中（由RouterMapping创建）       在交换机中（由RouterMapping创建）       在路由器中（由BrowserRouter创建）       在BrowserRouter中（由RouterMapping创建）       在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未定义（您需要从MyModalTitle导出MyModal才能使该语法起作用）。在App.js中，您需要添加import MyModalTitle from './render/component/modal/MyModalTitle';，然后使用

           <MyModalTitle property='My header'/>

代替

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

在App.js之内。

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

1 个答案: