如何在 Fluent UI 中正确使用 Modal

Question

我是 React 和 Fluent UI 的新手，我从 CDN 加载了所有文件，当我尝试执行以下代码时，模式没有打开。请告诉我我在这里做错了什么。我搜索了示例，但找不到一个。 代码如下：

  const { DefaultButton,Fabric,Modal,IconButton} = window.FluentUIReact;
    const app = () =>{
      var isModalOpen = false;
      function showModal(){
        isModalOpen = true;
      }
      function hideModal(){
        isModalOpen = false;
      }
      return (
        <Fabric applyThemeToBody>
        <DefaultButton onClick={showModal}>Make a Poll</DefaultButton>
        <Modal
            titleAriaId={"id"}
            isOpen={isModalOpen}
            onDismiss={hideModal}
            isBlocking={true}
          >
            <div>
              <span id={"id"}>Lorem Ipsum</span>
              <IconButton
                iconProps = {{iconName: 'Cancel'}}
                ariaLabel="Close popup modal"
                onClick={hideModal}
              />
            </div>
            <div>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
                amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
              </p>
            </div>
          </Modal>
        </Fabric>
      );
    };

    ReactDOM.render(app(), document.getElementById('app'))

<div id="app"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@fluentui/react@7/dist/fluentui-react.js"></script>
  <script src="https://unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script defer type="text/babel" src="script.jsx"></script>

提前致谢

Answer 1

如果你使用isModalOpen = true/false，React 永远不会知道它应该重新渲染视图。 React 提供了 useState 挂钩来存储状态。然后你可以调用 setter 来更新值并通知 React 它必须重新渲染组件。

You may only call hooks inside components and custom hooks. 所以我们必须将函数app 转换成一个组件。只需将函数名称更改为以大写字母开头即可。

来自Components and Props：

注意：组件名称始终以大写字母开头。

React 将以小写字母开头的组件视为 DOM 标签。 例如，<div /> 表示 HTML div 标签，但 <Welcome /> 表示一个组件并要求Welcome 在范围内。

要详细了解此约定背后的原因，请阅读 JSX In Depth.

进行此更改后，我们还需要更新调用App 的方式。我们现在不是将app() 传递给ReactDOM.render()，而是传递<App />。

const { useState } = React;
const { DefaultButton, Fabric, Modal, IconButton } = FluentUIReact;

const App = () =>{
  const [isModalOpen, setIsModalOpen] = useState(false);
    
  function showModal() {
    setIsModalOpen(true);
  }
  function hideModal() {
    setIsModalOpen(false);
  }
  return (
    <Fabric applyThemeToBody>
      <DefaultButton onClick={showModal}>Make a Poll</DefaultButton>
      <Modal
        titleAriaId="id"
        isOpen={isModalOpen}
        onDismiss={hideModal}
        isBlocking={true}
      >
        <div>
          <span id="id">Lorem Ipsum</span>
          <IconButton
            iconProps = {{iconName: 'Cancel'}}
            ariaLabel="Close popup modal"
            onClick={hideModal}
          />
        </div>
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
          </p>
        </div>
      </Modal>
    </Fabric>
  );
};

ReactDOM.render(<App />, document.getElementById('app'))

<div id="app"></div>

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@fluentui/react@7/dist/fluentui-react.js"></script>
<script src="https://unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>