时间戳

首页 > 解决方案 > 如何在 Fluent UI 中正确使用 Modal

javascript - 如何在 Fluent UI 中正确使用 Modal

问题描述

我是 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>

提前致谢

标签： javascripthtmlcssreactjsfluent-ui

解决方案

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

您只能在组件内部调用钩子和自定义钩子。所以我们必须将函数app转换为组件。只需将函数名称更改为以大写字母开头即可。

从组件和道具：

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

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>

推荐阅读