如何传递react-router-dom props & normal props

Question

我知道使用react-router-dom道具的方法。就是这样的

import React from 'react';
import { RouteComponentProps } from 'react-router-dom';

const  AAA : React.FC<RouteComponentProps> = ({history}) => {
.
.
.
}

我知道如何使用由父组件发送的属性，如下所示

import React from 'react';

const AAA = props => {
.
.
.
}

但我不知道如何使用这两个。

请给我一些建议。

Answer 1

您正在使用的{history}属性正在使用对象解构。

您可以这样做：

1. 您可以在代码中直接使用history和sampleProp。

<ChildComponent samepleProp />

const ChildComponent = ({history, samepleProp}) = {}

1. 或者你可以这样做。

您必须使用props.history和props.sampleProp

<ChildComponent samepleProp />

const ChildComponent = (props) = {}

Answer 2

在对象上执行析构时。您将只能访问您指定的属性。

由于传递给组件的所有属性都可以通过它的构造函数接收的参数(通常命名为props )进行访问，因此可以通过props.prop_name访问它们

如果您有一个ChildComponent，您想在其中访问router属性，如历史记录、位置、匹配以及从它的父级接收的属性，您可以这样执行。

考虑在ParentComponent中呈现ChildComponent，如下所示

<ChildComponent name="The child component" />

要同时访问router参数和从父级接收的属性，请执行以下操作

import { withRouter } from 'react-router-dom';

const ChildComponent = (props) => {

    // Here you have access to react-router-dom parameter

    const {history, location, match} = props;

    return <div>
         
         {/* 
             to access name props receive from the parent
             component you perform it like below 
         */}

         {props.name} 

    </div>
}

export default withRouter(ChildComponent);