Блог

У меня есть этот компонент, который содержит 2 элемента, таких как код ниже основных элементов и элемент заголовка для макета. Как я могу передать состояние/реквизиты из основного элемента в элемент заголовка? Я хочу задать некоторые условия из основного компонента и передать в заголовок, например, состояние «шаг» и переменную истории.

Пожалуйста, помогите мне прояснить это, большое спасибо.

 import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { AlbumAddIcon } from '../../assets/svg';
import { HeaderTitle } from '../../components/common';
import { doGetListAlbum, RootState, useAppDispatch } from '../../redux';
import './SelectAlbum.scss';

export const SelectAlbum = () => {
  /** States */
  const [step, setStep] = useState<number>(1);

  /** Hooks */
  const history = useHistory();
  const dispatch = useAppDispatch();
  const { dataUser } = useSelector((state: RootState) => state.currentUser);
  const { albums, isLoading } = useSelector((state: RootState) => state.media);

  useEffect(() => {
    if (dataUser amp;amp; dataUser.id) {
      dispatch(doGetListAlbum({ userid: dataUser.id }));
    }
  }, [dataUser]);

  return (
    <>
      <div className="album">
        <div className={`album__wrapper`} onClick={() => history.push('/post/album/create')}>
          <div className="album__item-wrapper">
            <div className="album__item album__item--plus">
              <AlbumAddIcon />
            </div>
            <span>Tạo album</span>
          </div>

          {albums.length
            ? albums.map((item, index) => (
                <div key={index} className="album__item-wrapper">
                  <div
                    className={`album__item ${
                      !item.thumbnailbackground ? 'album__item--normal' : ''
                    }`}
                    style={{
                      backgroundImage: item.thumbnailbackground
                        ? `url(${item.thumbnailbackground})`
                        : 'transparent',
                    }}
                  />
                  <span>{item.albumname}</span>
                </div>
              ))
            : null}
        </div>
      </div>
    </>
  );
};

SelectAlbum.Header = <HeaderTitle typeIcon="close">Chọn album</HeaderTitle>;