使用React Router更改基于URL的组件

我觉得你在做什么很好。您走在正确的道路上。

React为您提供了多种API，它们将完全照顾您不确定如何实现的（

way to pass props to components rendered bythis.props.children

首先，您需要看一看cloneElement

基本上它将使用一个React元素，将其克隆，然后返回另一个props，您可以根据需要完全更改，更改或替换这些props。

此外，将其与Children Utilities结合使用-遍历提供给顶层组件的子代，并分别对每个元素进行必要的更改。

提议的示例用法可能很简单

<div className='main-content'>    {React.children.map(this.props.children, (child, index) => {       //Get props of child       const childProps = child.props;       //do whatever else you need, create some new props, change existing ones       //store them in variables       return React.cloneElement(child, {...childProps, //these are the old props if you don't want them changed...someNewProps,someOldPropOverwritten, //overwrite some old the old props        });     )}</div>

使用这些工具可以在任何地方创建真正通用且可重用的组件。从更常用工具

Children

map

forEach

toArray

希望这可以帮助。