Реагировать на создание собственной проблемы компонента с импортом

Question

Я пытаюсь сделать собственные компоненты для модальных. Первый компонент является модальным, а второй - заголовком. Когда я добавил эту строку <MyModal.MyModalTitle property='My header'/> в App.js a, я получил ошибку в консоли:

react.development.js? 72d0: 207 Предупреждение: React.createElement: тип недопустим - ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или, возможно, вы перепутали импорт по умолчанию и имена.

Blockquote Проверьте метод рендеринга App. в приложении (созданный Route) в маршруте (создан RouterMapping) в Switch (созданный 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.