如何在 class 组件的函数中使用 props？

Question

我有问题。我使用 React Router 检查 URL 路径。

<Route path="/:brand" component={Container} />

我在Container组件中使用了它

import React from 'react';
import CarPage from '../components/CarPage';
import '../styles/Container.css';

const Container = ({ match }) => {
    return (
       <CarPage brand={match.params.brand} />
   );
}

export default Container;

在组件中，我想在“findMyIndex”函数中使用它来检查它在“carList”数组中的索引

import React, { Component } from 'react';

class CarPage extends Component {
    state = {
        index: 0,
    }
    carList = ["Ford", "Fiat", "Ferrari"];

    findMyIndex = (props.brand) => {
        console.log(props.brand);    
    }
    render() {
        return (
            <p>{this.props.brand}</p>
        );
    }
}

export default CarPage;

然后他必须在this.state.index中输入找到的索引。问题是我不知道如何在 class 组件的函数中正确使用 props。我是初学者，想知道如何在“findMyIndex”中正确使用“brand”。请帮忙。

Answer 1

您的道具可以在 class 的任何地方访问。您可以像这样在 findMyIndex 方法中访问它：

findMyIndex = () => {
    console.log(this.props.brand);    
}

如何在 class 组件的函数中使用 props？

How to use props in a function in class component?

reactjs

react-router

react-props

react-component