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

【问题标题】：Rendering functional component from inside a functional component从功能组件内部渲染功能组件
【发布时间】：2020-05-02 23:36:30
【问题描述】：

所以我有一个功能组件，它是一个工具栏。它的父级是一个文本编辑器。工具栏有许多子组件，它们是按钮。单击其中一个按钮时，我希望出现一个模式。 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 的新手，因此欢迎提出任何建议。

谢谢！

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

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

你有几个选择：

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

【讨论】：

我更新了问题以提供更多背景信息。我在FormatToolbarModal 组件本身上使用了一个门户。抱歉，这个问题第一次问得不好。
只是为了让你知道，我设法修复了它。你的选择是行不通的。但是，您的逻辑为我指出了正确的方法。谢谢一群人！

【解决方案2】：

反应 101。

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

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

您的代码也不足以理解结构（这些组件的呈现方式和位置）。我要说的是，还有许多其他可能的方式可以向南发展，但仅此一项就可能造成这个错误。

【讨论】：

更新澄清。

【解决方案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}
    />
    </>
  )
}

【讨论】：