Передать функцию в компоненте, возвращающем указанное содержимое

Question

У меня есть несколько страниц на моем сайте.

Я создал компонент для раздела контента, содержащего текст и изображения. Для каждой страницы я создал класс для отображения / скрытия на соответствующей странице. Теперь проблема в том, что загрузка страницы очень медленная из-за большого содержания. Есть ли способ загрузить только контент, необходимый для страницы. Я не могу sh скрыть / показать, потому что это все еще отображается в DOM, что замедляет работу сайта.

что-то вроде ниже

//in page1.js
<ContentComponent content="page1"/> 
//in page2.js
<ContentComponent content="page2"/> 

//component
const ContentComponent =() => {
 return(
     page1= { 
        <div>content for page 1</div>
     }
     page2= { 
        <div>content for page 2</div>
     }
 )
}

Есть ли способ сделать что-то как это?

Answer 1

Вероятно, вы хотите сделать:

// ContentComponent.jsx
const ContentComponent =(props) => {
 if (!props.children) {
   return null;
 }

 return <div style={/* some styles for content */}>{props.children}<div>;
}

// page1.jsx
...
return (
  <div>
  <h1>Page 1</h1>
  <ContentComponent>
     <div>content for page 1</div>
  </ContentComponent>
  </div>
);

// page2.jsx
...
return (
  <div>
  <h1>Page 2</h1>
  <ContentComponent>
     <div>content for page 2</div>
  </ContentComponent>
  </div>
);

Answer 2

Вы можете получить доступ через такой же реквизит, используя деструктуризацию.

//in page1.js
<ContentComponent content1="page1"/> 
//in page2.js
<ContentComponent content2="page2"/> 

//component
const ContentComponent =({content1, content2}) => {
 return(
     <>
      <h3>{content1}</h3>
      <h3>{content2}</h3>
     </>
 )
}