如何显示传递给组件的参数,以及如何在reactjs中为组件提供可选参数?

使用 ? 这样可以传递可选参数:

<Route path="/home/:id?" component={Home}/>

Start reading here 了解更多信息

要显示变量,请使用 {this.props.match.params.id} 。如果要处理id不存在的情况,可以使用类似的方法:

{this.props.match.params.id || 'sorry lol no id is specified'}

为了澄清出现错误的原因:“params”是一个包含所有参数的对象。React不知道如何显示对象。如果要显示对象,可以使用 JSON.stringify(params) 但我认为这不是你想要的。

使用 ? 正如@pgsandstrom所说,传递一个可选参数对我有用。

至于从params检索id属性,我所做的就是为此创建一个对象。道具。火柴params,然后使用该对象检索id。以下是我使用的代码:-

let data = Object.create(this.props.match.params);

然后

data.id

将检索我的id,而不会在typescript中提供任何编译错误

问题是您想要渲染对象,因为这是。道具。火柴params指向整个对象,所以您要么必须字符串化,要么请求Id之类的特定属性。

{JSON.stringify(this.props.match.params)}

或

{this.props.match.params.id}
ofcourse that for this thing you have to accept id as parametr /home/:id

由于您使用的是typescript,这取决于您是在编写类(组件)还是函数,无论哪种方式,您都会遇到错误,因为您没有正确键入它,但由于您正在引用它。道具,我将承担它的等级。

class App extends React.Component<Props> {}

interface Props {
    match: any;
}

是的,它的键入能力很弱,但除非你直接从库中导入键入,否则你需要花一段时间才能键入全部内容,而且在每个文件中都这样做会很愚蠢。