Pracuję w projekcie React i muszę wyrenderować niektóre komponenty w oparciu o układ.

- załóżmy, że masz tablicę informującą o komponentach, które chcesz renderować:

Layout1 = ['Events', 'Photo', 'News']

- i funkcja, która zależy od modułu, renderuje określony komponent z pewnymi danymi:

layout1.forEach(function(layout) {
  someFuncions(layout, somedata);
});

someFunction = (layout, data) => {
  layout.forEach( function(Comp) {
    if(Comp == 'Events') {
      return (<Events module-data={data} />)
    } else if(Comp == 'Photo') {
      return (<Photo module-data={data} />)
    } else if(Comp == 'News') {
      return (<News module-data={data} />)
    }
  });
}

- Ponieważ możliwe jest posiadanie wielu komponentów, chcę znaleźć sposób na uniknięcie funkcji „if” w celu określenia, który komponent powinienem renderować.

Jak mogę to osiągnąć? Wielkie dzięki

0
Carlos Fray 2 kwiecień 2020, 20:09

5 odpowiedzi

Najlepsza odpowiedź

Podszedłbym do tego, tworząc mapę dla twoich komponentów, a następnie wykonując wyszukiwanie podczas renderowania.

const components = {
    Events, // Shorthand for 'Events': Events
    Photo,
    News
};

const layout = ['Events', 'Photo'];

const someFunction = (layout, data) =>
    layout.map((name) => {
        const Component = components[name];
        return <Component module-data={data} />;
    });
0
Grabofus 2 kwiecień 2020, 17:24

Możesz spróbować czegoś takiego

someFunction = (layout, data) => {
 layout.forEach( function(Comp) {
   return <Comp module-data={data} />
 });
}
0
uday 2 kwiecień 2020, 17:20

Możesz użyć podobnej składni switch, ale może trochę czyściej.

switch(comp) {
    case 'Events':
        return (<Events module-data={data} />)
    case 'Photo':
        return (<Photo module-data={data} />)
    case 'News':
        return (<News module-data={data} />) 
}
1
Shmili Breuer 2 kwiecień 2020, 17:15

A co z użyciem obiektu javascript, który odwzorowuje układ na żądany komponent? W ten sposób jasne jest, że zamierzasz renderować inny komponent w zależności od układu.

Zobacz poniższy przykład:

const someFunction = (layout, data) => {
  const componentMap = {
    'Events': <Events module-data={data} />,
    'Photo': <Photo module-data={data} />,
    'News': <News module-data={data} />
  }

  return componentMap[layout];
}
0
khuynh 2 kwiecień 2020, 17:40

Możesz przekazać komponent w tablicy bezpośrednio.

import Events from 'path/to/Events'
import Photo from 'path/to/Photo'
import News from 'path/to/News'

Layout1 = [Events, Photo, News]

A potem wszędzie tam, gdzie wywołasz tę funkcję.

Z pierwotnego pytania wynika, że layout1 w Twoim pytaniu jest tablicą układu Layout1 podobną do tablic.

layout1.forEach(function(layout) {
  someFuncions(layout, somedata);
});

someFunction = (layout, data) => {

  // returning from forEach won't result in anything. you probably want to map
  layout.forEach( function(Component) {
    return (<Component module-data={data} />)
  })
}
1
Saurav Seth 2 kwiecień 2020, 17:20