如何在 Fluent 中正确使用 Modal UI

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:

Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.

To learn more about the reasoning behind this convention, please read JSX In Depth.

进行此更改后，我们还需要更新调用方式 App。我们现在将 <App />.

传递给 ReactDOM.render()，而不是将 app() 传递给 ReactDOM.render()

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>

如何在 Fluent 中正确使用 Modal UI

How to properly use Modal in Fluent UI

html

javascript

css

reactjs

fluent-ui