Как импортировать компонент пользовательского интерфейса материала в основной класс?

Question

Итак, я пытаюсь добавить элемент «SimpleAppBar» в дизайн моего приложения React.Вот код этого элемента, непосредственно с официального сайта Material UI:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';

const styles = {
  root: {
    flexGrow: 1,
  },
};

function SimpleAppBar(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <AppBar position="static" color="default">
        <Toolbar>
          <Typography variant="title" color="inherit">
            Photos
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

SimpleAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleAppBar);

Я копирую этот код в отдельный файл ( AppBar.js ).Сейчас я импортирую этот файл в свой основной файл, используя import AppBar из './components/AppBar'.И я считаю, что затем мне нужно вызвать функцию SimpleAppBar () из файла AppBar.js в некоторой части кода моего основного класса для отображения самой панели приложения, но как это сделать, как это должно выглядеть в коде?Я уже пробовал что-то вроде {new AppBar (). SimpleAppBar ()}, но не получилось.PS Я новичок в JavaScript и пользовательском интерфейсе материалов, поэтому, пожалуйста, не сердитесь, если это глупый вопрос) Структура проекта: index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ToDo from './ToDo';

ReactDOM.render(<ToDo />, document.getElementById('root'));

Todo.js

import React, {Component} from 'react';
import './ToDo.css';
import ToDoItem from './components/ToDoItem';
import AppBar from './components/AppBar';
import Logo from './assets/logo.png';

const appBar = <AppBar />

class ToDo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                {
                    title: 'Cup cleaning',
                    todo: "Wash and take away the Kurzhiy's cup from WC"
                },
                {
                    title: 'Smoking rollton',
                    todo: 'Do some rollton and cigarettes'
                },
                {
                    title: 'Curious dream',
                    todo: 'Build a time machine'
                }
            ],
            title: '',
            todo: ''
        };
    };

    createNewToDoItem = () => {
      this.setState(({ list, title, todo }) => ({
        list: [
            ...list,
          {
            title,  
            todo
          }
        ],
        title: '',
        todo: ''
      }));
    };

    handleKeyPress = e => {
        if (e.target.value !== '') {
          if (e.key === 'Enter') {
            this.createNewToDoItem();
          }

        }
    };

    handleTitleInput = e => {
      this.setState({
        title: e.target.value,
      });
    };

    handleTodoInput = e => {
        this.setState({
         todo: e.target.value
      });
    };

    deleteItem = indexToDelete => {
        this.setState(({ list }) => ({
          list: list.filter((toDo, index) => index !== indexToDelete)
      }));
    };

    editItem = (i, updTitle, updToDo) => {
        let arr = this.state.list;
        arr[i].title = updTitle;
        arr[i].todo = updToDo;
        this.setState ({list: arr});
    };

    eachToDo = (item, i) => {
        return <ToDoItem
                    key={i}
                    title={item.title}
                    todo={item.todo}
                    deleteItem={this.deleteItem.bind(this, i)}
                    editItem={this.editItem.bind(this, i)}
                />
      };

    render() {
        return (
            <div className="ToDo">
                <img className="Logo" src={Logo} alt="React logo"/>
                <h1 className="ToDo-Header">{AppBar}</h1>
                <div className="ToDo-Container">

                    <div className="ToDo-Content">
                        {this.state.list.map(this.eachToDo)}
                    </div>

                    <div>
                       <input type="text" placeholder="Enter new title" value={this.state.title} onChange={this.handleTitleInput} onKeyPress={this.handleKeyPress}/>
                       <input type="text" placeholder="Enter new todo" value={this.state.todo} onChange={this.handleTodoInput} onKeyPress={this.handleKeyPress}/>
                       <button className="ToDo-Add" onClick={this.createNewToDoItem}>+</button>
                    </div>
                </div>
            </div>
        );
    }
}

export default ToDo;

Answer 1

Вы очень близки.Вам не нужно вызывать функцию, в реакции все является компонентом .Компонент может иметь либо состояние (класс), либо не иметь состояния (функционал).Проще говоря, компоненты без состояния не имеют жизненного цикла и не имеют state.По сути, это просто render метод компонента класса, но вы не можете прочитать this.state.

Итак, вы бы использовали свой экспорт как:

import React from 'react';
import ReactDOM from "react-dom";
import AppBar from './components/AppBar';

// declare a functional component, with es6 shorthand
const myapp = <AppBar />
// assumes that there is a <div id=root></div> somewhere in your index.html
ReactDOM.render(myapp, document.getElementById('root'));