从功能组件内部呈现功能组件

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;

希望从这一点，你能更清楚地看到我的问题。我是新的反应和钩，所以任何的建议都是感激的。

谢谢!

Answer 1

好的，正如我所怀疑的，正如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}
    />
    </>
  )
}

Answer 2

您正在调用该函数，但没有将得到的JSX元素传递给任何呈现它们的元素。考虑一下与顶层组件一起使用的引导操作，其中将结果传递给ReactDOM.render或类似的组件。这就是把它写在页面上的原因。对于调用模态函数的结果，您需要做同样的事情。

你有几个选择：

1. 您可以使用函数设置的标志，然后在另一个组件中有条件地呈现模态。
2. 你可以把它渲染成(in?)一个门户。

Answer 3

反应101。

1. 响应命名约定:组件名称应遵循pascal-case。 从你的代码来看，ShowModal应该是showModal。

而且，您的代码不足以理解结构(这些组件是如何和在何处呈现的)。我想说的是，还有很多其他可能的方法可以让这个问题向南发展，但光是这个问题就可能导致这个问题。