Question

所以我有一个功能组件，它是一个工具栏。它的父级是文本编辑器。工具栏上有许多子组件，它们是按钮。单击这些按钮之一时，我希望出现一个模式。 useModal的逻辑。但是FormatToolbarModal没有出现。

我已经阅读过，组件的所有呈现都必须由顶级自定义组件完成吗？但是我不确定从那里去哪里。我希望此模式可重复使用，因为工具栏中的其他选项将使用它。

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和hooks的新手，所以请多多指教。

谢谢！

Answer 1

您正在调用该函数，但没有将生成的JSX元素传递给将呈现它们的任何东西。想想您与顶级组件一起使用的引导操作，将结果传递到ReactDOM.render或类似文件中。那就是把它放在页面上的原因。您需要执行相同的操作才能调用模态函数。

您有两种选择：

您可以通过在函数中设置一个标志来实现，然后有条件地在另一个组件中渲染模式。
您可以将其呈现为portal中的（in？）。

Answer 2

反应101。

反应命名约定：组件名称应遵循pascal大小写。

例如：从您的代码中showModal应该是ShowModal。

您的代码还不足以理解结构（这些组件的渲染方式和位置）。我要说的是，还有很多其他可能的方法可以解决这个问题，但是仅此一项就可以解决这个问题。

Answer 3

好的，我怀疑还是T.J.人群提到。我的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}
    />
    </>
  )
}

从功能组件内部渲染功能组件

3 个答案: