Question

我有路由数组，该数组传递到RouteComponent

const 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)

餐厅组件：

当我看到控制台时，会出现这样的错误

那么，什么可以作为道具传递呢？找不到解决方案。预先感谢

App.js

import ...
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>
    );
  }
}

RouteComponent.js

import { 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,
};

编辑于22/03/2020

与的行给出以下内容：错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。

检查Context.Consumer的呈现方法。

class RouteComponent extends Component {
  render() {
    const { path, component } = this.props;
    return (
      <Route path={path} component={component} />
    );
  }
}

RouteComponent.propTypes = {
  path: PropTypes.any.isRequired,
  component: PropTypes.any.isRequired,
};

但是如您所见，我将PropTypes设置为“任意”

Answer 1

好的，您需要做一些更改，可能还不够。因此，请让我知道在评论中是否无效。

第一步

将组件正确发送到路由

from sklearn.metrics import r2_score

y_pred = model.predict(X)
r_squared = r2_score(y, y_pred)
adjusted_r_squared = 1 - (1-r_squared)*(len(y)-1)/(len(y)-X.shape[1]-1)

第二步

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

class RouteComponent extends Component {
  render() {
    const { path, component } = this.props;
    return (
      <Route path={path} component={component}/>
    );
  }
}

Answer 2

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

然后，与其通过表达式调用组件，不如通过组件调用它，即

例如，

function Routecomponent({ component: Component, ...rest }: RouteProps) {
    if (!Component) return null;

    return (
        <Route
            {...rest}
                <Component {...props} />
               />}
    )
}

如何正确在React Components中传递道具？

2 个答案: