Saya ingin mengulangi daftar komponen yang Anda bisa, ada banyak redundansi jadi misalnya saya memiliki daftar rute yang panjang seperti yang diberikan di bawah ini

          <Route
            exact
            path={Routes.HOME}
            render={() => (
              <LandingPage
                setValue={setValue}
                setSelectedIndex={setSelectedIndex}
              />
            )}
          />
          <Route
            exact
            path={Routes.SERVICES}
            render={() => (
              <ServicesPage
                setValue={setValue}
                setSelectedIndex={setSelectedIndex}
              />
            )}
          />
          <Route
            exact
            path={Routes.MOBILE_APPS}
            render={() => (
              <MobileAppsPage
                setValue={setValue}
                setSelectedIndex={setSelectedIndex}
              />
            )}
          />

Saya akan membuat daftar seperti di bawah ini

const list = [
{path: Routes.HOME, component: LandingPage},
{path: Routes.SERVICES, component: ServicesPage},
{path: Routes.MOBILE_APPS, component: MobileAppsPage}];

Dan saya ingin mencapai di bawah ini

list.map((obj) => (
          <Route
            exact
            path={obj.path}
            render={() => (
              <obj.component
                setValue={setValue}
                setSelectedIndex={setSelectedIndex}
              />
            )}
          />
))
2
rash 2 Juli 2020, 19:20

1 menjawab

Jawaban Terbaik

Saat merender komponen khusus, Anda harus namanya Kapitalisasi:

// Good
<Component/>
<Obj.Component/>
<Obj.component/>

// Bad
<component/>
<obj.component/>
<obj.Component/>
list.map(({ path, component: Component }) => (
  <Route
    exact
    path={path}
    render={() => (
      <Component setValue={setValue} setSelectedIndex={setSelectedIndex} />
    )}
  />
));

// Same
list.map((obj) => {
  const { component: Component, path } = obj;
  return <Route path={path} render={() => <Component {...}/>} />;
});

4
Dennis Vash 2 Juli 2020, 16:45