Question

所以，我试图在我的React应用程序设计中添加一个“ SimpleAppBar”元素。这是直接从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 ）。现在，使用从'./components/AppBar'导入AppBar将该文件导入到主文件中。而且我相信接下来我需要在我的主类代码的某些部分中从AppBar.js文件中调用SimpleAppBar（）函数，以呈现应用程序栏本身，但是该怎么做，代码中应如何显示呢？我已经尝试过类似{new AppBar（）。SimpleAppBar（）}的方法，但是失败了。附言我是JavaScript和Material UI的新手，所以如果这是一个愚蠢的问题，请不要生气）项目结构： 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

您非常亲密。您不需要调用该函数，在反应中，一切都是component。组件可以具有state（类），也可以是无状态的（功能性的）。简而言之，无状态组件没有生命周期，也没有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'));

如何在主类中导入材料UI组件？

1 个答案: