Question

我有一个用Material UI构建的FilterSliders组件。我已经通过解构{classes.title}通过了一个名为const { classes }: any = this.props;的道具。我在调用组件时尝试访问prop，但是我无法访问它，并且我的代码抛出错误。

我的FilterSliders组件：

import './FilterSliders.scss';

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

const styles = {
  root: {
    width: '100%',
  },
  slider: {
    padding: '22px 0px',
  },
};

class FilterSliders extends React.Component {
  public static propTypes: { classes: PropTypes.Validator<object>; };
  public state = {
    value: 50,
  };

  public handleChange = (event: any, value: any): any => {
    this.setState({ value });
  };

  public render() {
    const { classes }: any = this.props;
    const { value } = this.state;

    return (
      <div className={`filter__sliders ${classes.root}`}>
        <Typography>{classes.title}</Typography>
        <Slider
          classes={{ container: classes.slider }}
          value={value}
          aria-labelledby='label'
          onChange={this.handleChange}
        />

      </div>
    );
  }
}

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

export default withStyles(styles)(FilterSliders);

在调用组件时尝试访问title道具：

<FilterSliders title='Submitted' />

它不起作用并引发错误：

Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<InferProps<{ classes: Validator<object>; }>, "classes">, never> & StyledComponentProps<"root" | "slider"> & { children?: ReactNode; }'.
  Property 'title' does not exist on type 'IntrinsicAttributes & Pick<Pick<InferProps<{ classes: Validator<object>; }>, "classes">, never> & StyledComponentProps<"root" |

非常感谢任何帮助！

更新：

@Richard建议我为title prop声明一个PropType ...我试图这样做：

FilterSliders.propTypes = {
  classes: PropTypes.object.isRequired,
  title: PropTypes.string.isRequired,
};

＆像这样：

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

我刚遇到错误。

Answer 1

我认为您误解了属性在React中的工作方式，当您将属性设置为组件（例如：<FilterSliders title='Submitted' />）时，该属性将被添加到组件的this.props对象中。

在这种情况下，由于您正在使用material-ui，withStyles(styles)将向与classes具有相同属性的组件中添加一个styles属性（类名）。 / p>

因此，要访问类，您可以使用this.props.classes或const { classes }: any = this.props并访问父组件设置的其他属性，而您只需要使用this.props.propertyName（例如：this.props.title或const { title }: string = this.props）。

这意味着您应该使用以下内容：

public render() {
    const { classes }: any = this.props;
    const { title }: string = this.props;
    const { value } = this.state;

    return (
      <div className={`filter__sliders ${classes.root}`}>
        <Typography>{title}</Typography>
        <Slider
          classes={{ container: classes.slider }}
          value={value}
          aria-labelledby='label'
          onChange={this.handleChange}
        />

      </div>
    );
  }

您还应该更改组件的propType

FilterSliders.propTypes = {
  classes: PropTypes.object.isRequired,
  title: PropTypes.string.isRequired
};

在React中调用组件时遇到访问道具的问题

1 个答案: