时间戳

首页 > 解决方案 > 如何使用 React 函数组件显示/隐藏微调器、快餐栏或其他瞬态组件

reactjs - 如何使用 React 函数组件显示/隐藏微调器、快餐栏或其他瞬态组件

问题描述

在单独的 DOM 元素中渲染微调器、小吃栏等是否比将它们添加到主应用程序组件树中更好？在 React 类组件中，很容易获得对类组件方法的引用来显示/隐藏微调器。有了新的 React Hooks 函数组件，它就不再那么容易了。如果我将微调器放在主组件树中，我可以使用新的“useContext”挂钩来显示/隐藏微调器吗？

下面是一个使用 Material-UI 的 React Hooks 全局微调器，它可以工作但非常 hacky。怎样才能使它更优雅？

namespace Spinner {
   'use strict';

   export let show: any; // Show method ref.
   export let hide: any; // Hide method ref.

   export function Render() {
      const [visible, setVisible] = React.useState(false); //Set refresh method.

      function showIt() {
         setVisible(true); // Show spinner.
      }

      function hideIt() {
         setVisible(false); // Hide spinner.
      }

      const styles: any = createStyles({
         col1Container: { display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' },
      });

      return (
         <div>
            {visible && <div style={styles.col1Container}>
               <CircularProgress key={Util.uid()}
                  color='secondary'
                  size={30}
                  thickness={3.6}
               />
            </div>}

            <SetSpinnerRefs showRef={showIt} hideRef={hideIt} />
         </div>
      ); // end return.
   } // end function.

   const mounted: boolean = true;

   interface iProps {
      showRef();
      hideRef();
   }

   function SetSpinnerRefs(props: iProps) {
      // ComponentDidMount.
      React.useEffect(() => {
         Spinner.show = props.showRef;
         Spinner.hide = props.hideRef;
      }, [mounted]);

      return (<span />);
   }
} // end module.

标签： reactjstypescriptreact-hooks

解决方案

问题与此类似，微调器的解决方案与模态窗口的解决方案相同。React 钩子不会改变它的工作方式，但可以使它更简洁。

组件层次结构中应该有单个微调器实例：

const SpinnerContext = React.createContext();

const SpinnerContainer = props => {
  const [visible, setVisible] = React.useState(false);

  const spinner = useMemo(() => ({
    show: () => setVisible(true),
    hide: () => setVisible(false),
  }), []);

  render() {
    return <>
      {visible && <Spinner />}
      <SpinnerContext.Provider value={spinner}>
        {props.children}
      </SpinnerContext.Provider>
    </>;
  }
}

这是通过上下文传递的：

const ComponentThatUsesSpinner = props => {
  const spinner = useContext(SpinnerContext);
  ...
  spinner.hide();
  ...
}

<SpinnerContainer>
  ...
  <ComponentThatUsesSpinner />
  ...
</SpinnerContainer>

推荐阅读