Записать React компонент в переменную и использовать "как тэг"

Question

Эта нерабочая конструкция нужна для оптимизации. page - номер активной вкладки.

Я хочу, чтобы в зависимости от активной по номеру страницы подкидывался active={true} в компонент.

Пример:

page == 0 => [<Page1 active={true}/>, <Page2 />, <Page3 />]
page == 1 => [<Page1 />, <Page2 active={true}/>, <Page3 />]

либо в неактивные можно закидывать active={false}.

Как можно поступить? Заранее спасибо.

Answer 1

Вот вам простой пример, как это можно реализовать:

const {Fragment, useState} = React;


const Page1 = ({active}) => {
  return <div>{active && 'Current'} page 1</div>
}

const Page2 = ({active}) => {
  return <div>{active && 'Current'} page 2</div>
}

const Page3 = ({active}) => {
  return <div>{active && 'Current'} page 3</div>
}

const App = () => {
  const [page, setPage] = useState(0);
  const pages = [Page1, Page2, Page3];
  const updatePage = (direction) => setPage((pages.length + page + direction) % pages.length);
  
  return (
    <Fragment>
      <button onClick={() => updatePage(-1)}>Prev</button>
      {
        pages.map((PageEl, index) => <PageEl active={page === index} />)
      }
      <button onClick={() => updatePage(1)}>Next</button>
    </Fragment>
  )
}

ReactDOM.render(<App/>, document.querySelector('#root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

БЛОГ НА HUSL

Записать React компонент в переменную и использовать "как тэг"

Ответы (1 шт):