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

Question

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

我读过一个组件的所有渲染都必须由顶级自定义组件完成？ 但我不确定 go 从那里到哪里。 我希望此模式可重复使用，因为工具栏中的其他选项将使用它。

索引.jsx

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

应用程序.jsx

const App = () => {
  return (
    <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 {
          ...
          }
      }}
    />
  )
}

使用Modal.jsx

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

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

  return {
    isShowing,
    toggle,
  }
};

export default useModal;

格式工具栏Modal.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

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

你有几个选择：

1. 您可以通过设置一个 function 设置的标志，然后在另一个组件中有条件地呈现模式来做到这一点。

2. 您可以将其渲染为（在？）一个门户。

Answer 2

反应 101。

1. React 命名约定：组件名称应遵循 pascal-case。

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

您的代码也不足以理解结构（这些组件的呈现方式和位置）。 我要说的是还有很多其他可能的方法可以使 go 南下，但仅此一项就可能导致此错误。

Answer 3

好吧，正如我怀疑和 TJ Crowder 提到的那样。 我的FormatButton不知道如何呈现这样的组件。 我像这样移动了组件，并将其包装在一个片段中。 现在一切正常。

对于任何有同样问题的人。 查看反应门户。 此外，此链接有帮助： https://levelup.gitconnected.com/create-a-modal-with-react-hooks-357c8aae7c3f

文本编辑器.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}
    />
    </>
  )
}