Javascript 在React中调用组件时访问道具有问题

我有一个

FilterSliders

组件，它是用MaterialUI构建的。我使用解构

const{classes}:any=this.props传递了一个名为
{classes.title}
的prop。我在调用组件时尝试访问道具，但我无法访问它&我的代码抛出了一个错误

我的
过滤器滑块
组件：

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);

它不工作&抛出一个错误：

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" |

&像这样：

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

我只得到了一些错误。
我认为您误解了属性在React中的工作方式，当您将属性设置为组件（例如：
）时，该属性将添加到组件的
this.props
对象中

在这种情况下，由于您使用的是材质ui，
和样式（样式）
将向组件添加一个
类
属性，该属性与
样式
（类名称）具有相同的属性

因此，要访问类，您可以使用
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>
    );
  }

我认为您误解了React中属性的工作方式，当您将属性设置为组件（例如：
）时，该属性将添加到组件的
this.props
对象中

在这种情况下，由于您使用的是材质ui，
和样式（样式）
将向组件添加一个
类
属性，该属性与
样式
（类名称）具有相同的属性

因此，要访问类，您可以使用
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>
    );
  }

title
是
this.props
的属性，而不是
this.props.classes
，请尝试使用
{this.props.title}
你能发布stacktrace错误吗？@RichardHaddad我现在已经用调用组件时得到的错误更新了我的帖子。你应该在
propTypes
中定义
标题。你能给我提供正确的方法和解释吗？不要以为我对任何东西都还很陌生，键入脚本和材料UI。
title
是
this.props
的属性，而不是
this.props.classes
，尝试使用
{this.props.title}
你能发布stacktrace错误吗？@RichardHaddad我现在已经用调用组件时得到的错误更新了我的帖子。你应该在
propTypes
中定义
标题。你能给我提供正确的方法和解释吗？不要以为我还是个新手，打字脚本和材料界面。非常感谢你的回答和令人惊讶的解释！非常感谢你的回答和令人惊讶的解释！
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>
    );
  }

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