如何在组件中运行材料 UI 示例片段

Question

我想要实现的只是一个页面，其标题为：“调查开始”，然后在该页面下有一个用户选择界面。我正在设想一个非常简单的组件：

export class Survey extends Component {
    state = { 

     }

    render() { 

        return (
            <React.Fragment>

                <h2>Survey Start</h2>
                <Survey sorcery here>
            </React.Fragment>
)
}

然后我的 App.js 运行这个。

我的目标是用 MaterialUI 用户选择的“一些重要的帮助文本”版本替换“调查魔法”。我直接从提供的 javascript 源中复制。在这里看到：

https://material-ui.com/components/selects/

我认为这就像在我的组件中复制和粘贴一样简单：

import React, { Component } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';



export class Survey extends Component {
    state = { 

     }

    const useStyles = makeStyles((theme) => ({
        formControl: {
          margin: theme.spacing(1),
          minWidth: 120,
        },
        selectEmpty: {
          marginTop: theme.spacing(2),
        },
      }));
      
      export default function SimpleSelect() {
        const classes = useStyles();
        const [age, setAge] = React.useState('');
      
        const handleChange = (event) => {
          setAge(event.target.value);
        };
    }

    render() { 

        return (
            <React.Fragment>

                <h2>Survey Start</h2>
                    <FormControl className={classes.formControl}>
                    <InputLabel id="demo-simple-select-helper-label">Age</InputLabel>
                    <Select
                    labelId="demo-simple-select-helper-label"
                    id="demo-simple-select-helper"
                    value={age}
                    onChange={handleChange}
                    >
                    <MenuItem value="">
                    <em>None</em>
                    </MenuItem>
                    <MenuItem value={10}>Ten</MenuItem>
                    <MenuItem value={20}>Twenty</MenuItem>
                    <MenuItem value={30}>Thirty</MenuItem>
                    </Select>
                    <FormHelperText>Some important helper text</FormHelperText>
                    </FormControl>
            </React.Fragment>

        );


    }
}

但是这返回了几个错误，包括引用我定义 useStyles 的行：

“const”修饰符只能在类型脚本文件中使用。

不知道为什么会抛出这个问题，因为我小心地点击了示例源代码上的 javascript 示例文件。

问题

如何让用户选择的 materialUI 示例与普通组件集成？

Answer 1

您正在组件内部混合组件。

尝试查看thinking in react 以更好地了解组件的工作原理。您需要将<SimpleSelect /> 导出为自己的组件，然后在您的<Survey /> 组件中使用它。

重构代码：

import React, { Component } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles(theme => ({
    formControl: {
        margin: theme.spacing(1),
        minWidth: 120
    },
    selectEmpty: {
        marginTop: theme.spacing(2)
    }
}));


function SimpleSelect() {
    const classes = useStyles();
    const [age, setAge] = React.useState('');

    const handleChange = event => {
        setAge(event.target.value);
    };

    return (
        <FormControl className={classes.formControl}>
            <InputLabel id="demo-simple-select-helper-label">Age</InputLabel>
            <Select
                labelId="demo-simple-select-helper-label"
                id="demo-simple-select-helper"
                value={age}
                onChange={handleChange}
            >
                <MenuItem value="">
                    <em>None</em>
                </MenuItem>
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
            </Select>
            <FormHelperText>Some important helper text</FormHelperText>
        </FormControl>
    );
}


export class Survey extends Component {
    state = {};

    render() {
        return (
            <>
                <h2>Survey Start</h2>
                <SimpleSelect />
            </>
        );
    }
}