不太好的方法

Question

是否最好在单独的DOM元素中呈现微调框，小吃栏等，而不是将其添加到主应用程序组件树中？在React类组件中，很容易获得对类组件方法的引用以显示/隐藏微调器。有了新的React Hooks功能组件，就不再那么容易了。如果将微调器放在主组件树中，是否可以使用新的“ useContext”钩子显示/隐藏微调器？

下面是一个使用Material-UI的React Hooks全局微调器，该方法虽然有效，但非常笨拙。如何使它变得更优雅？

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.

Answer 1

在React类组件中，很容易获得对类组件方法的引用以显示/隐藏微调器

您可以继续使用类组件。他们不会去任何地方

不太好的方法

在我看来，使用类方法显示和隐藏微调框实际上是很差的做法。假设您的api看起来像

<Spinner {ref=>this.something=ref}/>

您使用

this.something.show(); // or .hide

更好的方法

<Spinner shown={state.shown}/>

现在您可以更改state.shown而不是存储引用并使用show / hide。

Answer 2

问题类似于this one，旋转器的解决方案与模式窗口的解决方案相同。 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>

Answer 3

尽管我认为Basarat的答案是解决这个问题的现代方法，但是下面的代码是我最终完成此方法的方法。这样，我只需要一行代码来构建微调器，而只需要一行代码来显示/隐藏它。

   <Spinner.Render />  {/* Build spinner component */}
   Spinner.show();     //Show spinner.

namespace Spinner {
   'use strict';
   export let show: any; //Ref to showIt method.
   export let hide: any; //Ref to hideIt method.

   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 showRef: any = React.useRef(showIt);
      const hideRef: any = React.useRef(hideIt);

      //Component did mount.
      React.useEffect(() => {
         Spinner.show = showRef.current;
         Spinner.hide = hideRef.current;
      }, []);

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

      return (
         <div>
            {visible && <div style={styles.row1Container}>
               <CircularProgress
                  color='secondary'
                  size={30}
                  thickness={3.6}
               />
            </div>}
         </div>
      ); //end return.

   } //end function.
} //end module.

如何使用React Function组件显示/隐藏微调器，小吃店或其他瞬态组件

3 个答案:

不太好的方法

更好的方法