Визуализация функционального компонента изнутри функционального компонента

Question

Итак, у меня есть функциональный компонент - панель инструментов. Его родителем является текстовый редактор. Панель инструментов имеет много дочерних компонентов, которые являются кнопками. При нажатии на одну из этих кнопок я хочу, чтобы появился модал. Логи c useModal. Но FormatToolbarModal не появляется.

Я читал, что весь рендеринг компонента должен выполняться пользовательским компонентом верхнего уровня? Но я не уверен, где go оттуда. Я хочу, чтобы этот модал можно было использовать повторно, так как другие опции на панели инструментов будут его использовать.

index.jsx

ReactDOM.render(routes, document.getElementById("app"));

App.jsx

const App = () => {
  return (
    <TextEditor/>
  )
}

TextEditor.jsx

const TextEditor = () => {
  return(
    <FormatToolbar>
      <FormatToolbarBlock format="link" icon={link2} />
      <FormatToolbarBlock format="image" icon={image} />
    </FormatToolbar>
    ... Editor stuff
  )
}


const FormatToolbarBlock = ({ format, icon }) => {
  const editor = useSlate();
  const {isShowing, toggle} = useModal();

  return (
    <FormatButton
      onMouseDown={e => {
        if(format === 'link'){
          toggle(e);
          <FormatToolbarModal       <---- here is my issue
            isShowing={isShowing}  
            hide={toggle}
          />
          } else if {
          ...
          }
      }}
    />
  )
}

UseModal.jsx

const useModal = () => {
  const [isShowing, setIsShowing] = useState(false);

  function toggle() {
    setIsShowing(!isShowing);
  }

  return {
    isShowing,
    toggle,
  }
};

export default useModal;

FormatToolbarModal. jsx

const FormatToolbarModal = ({ isShowing, hide }) => isShowing ? ReactDOM.createPortal(
  <React.Fragment>
    <p>I am a modal</p>
  </React.Fragment>, document.body 
): null;

export default FormatToolbarModal;

Надеюсь, что из этого вы можете увидеть мою проблему яснее Я новичок в React и крюках, так что любые советы приветствуются.

Спасибо!

Answer 1

Вы вызываете функцию, но не передаете получившиеся элементы JSX чему-либо, что будет их отображать. Подумайте об операции начальной загрузки, которую вы используете с компонентом верхнего уровня, где вы передаете результат в ReactDOM.render или аналогичный. Вот что помещает это на страницу. Вы должны сделать то же самое с результатом вызова вашей модальной функции.

У вас есть несколько вариантов:

1. Вы можете сделать это, имея флаг, который ваша функция устанавливает, а затем условно отображает модальное изображение внутри другого компонента.

2. Вы можете отобразить его как (in?) portal .

Answer 2

Хорошо, так как я подозреваю и как упоминал Ти Джей Краудер. Мой FormatButton не знал, как сделать такой компонент. Я переместил компонент так, и обернул его фрагментом. Теперь все работает.

Для тех, у кого такая же проблема. Проверьте порталы реагирования. Также эта ссылка помогла: https://levelup.gitconnected.com/create-a-modal-with-react-hooks-357c8aae7c3f

TextEditor.jsx

const FormatToolbarBlock = ({ format, icon }) => {
  const editor = useSlate();
  const {isShowing, toggle} = useModal();

  return (
    <>
    <FormatButton
      onMouseDown={e => {
        if(format === 'link'){
          toggle(e);
          } else if {
          ...
          }
      }}
    />
    <FormatToolbarModal
      isShowing={isShowing}  
      hide={toggle}
    />
    </>
  )
}

Answer 3

React 101.

1. Соглашение о присвоении имен: имена компонентов должны следовать за pascal-case.

   Например: из вашего кода showModal должен быть ShowModal.

также вашего кода недостаточно для понимания структуры (как и где эти компоненты отображаются). Я говорю о том, что есть много других возможных способов, которыми это может go на юг, но одно это может сделать эту ошибку.