如何正确传递 React Components 中的 props？

Question

我有路由数组，它传递到 RouteComponentconst info = [  { path: '/restaurants/:id', component: <Restaurant match={{ params: '' }} /> },  { path: '/restaurants', component: <ListRestaurant match={{ path: '/restaurants' }} /> }];我使用 Axios 连接后端餐厅组件：  async componentDidMount() {    this.getOne();  }  getOne() {    const { match } = this.props;    Api.getOne('restaurants', match.params.id)餐厅组件：当我看到控制台时出现这样的错误那么，什么可以作为道具传递呢？找不到解决办法。提前致谢应用程序.jsimport ...import info from './components/info/routes';class App extends Component {  render() {    const routeLinks = info.map((e) => (      <RouteComponent        path={e.path}        component={e.component}        key={e.path}      />    ));    return (      <Router>        <Switch>          {routeLinks}        </Switch>      </Router>    );  }}路由组件.jsimport { Route } from 'react-router-dom';class RouteComponent extends Component {  render() {    const { path, component } = this.props;    return (      <Route path={path}>        {component}      </Route>    );  }}RouteComponent.propTypes = {  path: PropTypes.string.isRequired,  component: PropTypes.object.isRequired,};

Answer 1

好的，您需要做一些更改，但可能还不够。所以让我知道如果在评论中不起作用。

第一步

将组件正确发送到路由

class RouteComponent extends Component {

  render() {

    const { path, component } = this.props;

    return (

      <Route path={path} component={component}/>

    );

  }

}

第二步

发送 JSX 元素，而不是 JSX 对象

const info = [

  { path: '/restaurants/:id', component: Restaurant },

  { path: '/restaurants', component: ListRestaurant }

];

Answer 2

从 react-router-dom 导入 RouteProps 并将其用作 routecomponent.js 中 props 的接口。

然后，不是通过表达式调用组件，而是像组件一样调用它，即

例如，

function Routecomponent({ component: Component, ...rest }: RouteProps) {

    if (!Component) return null;

    return (

        <Route

            {...rest}

                <Component {...props} />

               />}

    )

}