在 react 如何使用可重用组件作为 React Component 传递到 react-router-dom 组件道具？答案

【问题标题】：in react how to use reusable component as React Component to pass into react-router-dom Component prop?在 react 如何使用可重用组件作为 React Component 传递到 react-router-dom 组件道具？
【发布时间】：2021-05-27 13:50:45
【问题描述】：

我有以下反应可重用组件，我可以在这里将它用作 react-router-dom 中的反应组件吗？我是新来的反应，非常感谢您的帮助...................................... ..................................................... ......

当我使用此代码时出现错误：var Component: ((props: Props) => JSX.Element) | JSX.元素 JSX 元素类型“组件”没有任何构造或调用签名。

 const ImageFirst = ({ imgSrc, title, desc, link, linkTitle }: Props) => {
      return (
        <div className="SRFoods">
          <div className="SRFoodsImg">
            <img src={imgSrc} alt="" width="100%" height="auto" />
          </div>
          <div className="content">
            <h1>{title}</h1>
            <p>{desc}</p>
            <h4>
              For More Info, Go to: &nbsp;
              <a href={link} target="_blank" rel="noopener noreferrer">
                {linkTitle}
              </a>
            </h4>
          </div>
        </div>
      );
    };

//App.js 页面

import ImageFirst from "./components/Pages/ImageFirst";
import SRFoodsImg from './assets/srproducts.png'
import Home from "./pages/Home";

const App: React.FC = () => {
  const routes = [
    { path: "/", name: "Home", Component: Home },
    { path: "/food/sragro", Component: <ImageFirst
    imgSrc={SRFoodsImg}
    title="SR Agro"
    desc="testofdesc"
    linkTitle="http://srfoods.com.np"
    link="http://srfoods.com.np"
    /> },
  ];
  return (
    <BrowserRouter>
      <>
        <Navbar />
        {routes.map(({ path, Component }) => (
          <Route key={path} exact path={path}>
            {({ match }) => (
              <div className="page">
                  <Component />
                </div>
            )}
          </Route>
        ))}
        <Footer />
      </>
    </BrowserRouter>
    );
  };

【问题讨论】：

似乎是一个非常简单的测试。你试过了吗？我怀疑它不起作用，你需要渲染一个匿名组件，即component: () => <ImageFirst ......./>。
谢谢它的工作，但为什么？

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

我相当肯定你不能将 完全实例化 组件传递给 Route 的 component 属性，但你可以 em> 传递一个匿名函数组件。

const routes = [
  {
    path: "/",
    name: "Home",
    Component: Home,
  },
  {
    path: "/food/sragro",
    Component: () => (
      <ImageFirst
        imgSrc={SRFoodsImg}
        title="SR Agro"
        desc="testofdesc"
        linkTitle="http://srfoods.com.np"
        link="http://srfoods.com.np"
      />
    ),
  },
];

这几乎相当于提前定义一个组件。

const CustomImageFirst = () => (
  <ImageFirst
    imgSrc={SRFoodsImg}
    title="SR Agro"
    desc="testofdesc"
    linkTitle="http://srfoods.com.np"
    link="http://srfoods.com.np"
  />
);

...

const routes = [
  {
    path: "/",
    name: "Home",
    Component: Home,
  },
  {
    path: "/food/sragro",
    Component: CustomImageFirst,
  },
];

【讨论】：