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

Question

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

react.development.js?72d0:207 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Blockquote Check the render method of App. in App (created by Route) in Route (created by RouterMapping) in Switch (created by RouterMapping) in Router (created by BrowserRouter) in BrowserRouter (created by RouterMapping) in 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'/>

在 App.js 内。

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

React create own component problem with import

reactjs

react-component