Provide hooks to change a component's props

[xhh0223]

const demo = () => {
  const [dialogPropsInstance, dialog] = useComponentProps<DialogProps>(
    <dialog/>,
  );

  return (
    <div onClick={() => {
      dialogPropsInstance.setMergedProps({
        visible:true,
        title:"title"
        content:<div>content<div>
      })
    }}>
      changeProps
      {dialog}
    </div>
  );
};

const demo = () => {
  const [loadingPropsInstance, loadingComponent] = useComponentProps(<Loading visible={false} />);
  return (
    <div>
      <div
        onClick={() => {
          loadingPropsInstance.setMergedProps({
            visible: true,
          });
        }}
      >
        stop loading
      </div>
      {loadingComponent}
    </div>
  );
};

const demo = () => {
  const [myCustomerComponentPropsInstance, myCustomerComponent] = useComponentProps(<MyCustomerComponent/>);
  return (
    <div>
      <div
        onClick={() => {
          myCustomerComponent.setMergedProps({
            style:{{
              color:"red"
            }},
            children:<div>123321</div>
            footer:<div>1232</div>
          });
        }}
      >
        changeProps
      </div>
      {myCustomerComponent}
    </div>
  );
};

[xhh0223]

Provide a hook to change the props of a component in an imperative manner, and centrally change the properties of the component to make the code more cohesive.

[xhh0223]

import { isEmpty } from 'lodash-es';
import useUpdate from '../useUpdate';
import React, { forwardRef, isValidElement, useImperativeHandle, useRef } from 'react';

interface ComponentPropsInstance<Props> {
  getProps(): Props;
  setMergedProps(props: Partial<Props>);
  setProps(props: Props);
}

const ProxyComponent = forwardRef((props: { children: React.ReactElement }, ref) => {
  const { children } = props;
  const update = useUpdate();
  const memoryRef = useRef({
    isValidElement: isValidElement(children),
    children,
  });
  useImperativeHandle(
    ref,
    () => ({
      getProps() {
        return memoryRef.current.children.props;
      },
      setMergedProps(props) {
        const isValidElement = memoryRef.current.isValidElement;
        const beforeChildren = memoryRef.current.children;
        if (isValidElement && !isEmpty(props)) {
          const cloneChildren = React.cloneElement(beforeChildren, {
            ...beforeChildren.props,
            ...props,
          });
          memoryRef.current.children = cloneChildren;
          update();
        }
      },
      setProps(props) {
        const isValidElement = memoryRef.current.isValidElement;
        const beforeChildren = memoryRef.current.children;
        if (isValidElement && !isEmpty(props)) {
          const cloneChildren = React.cloneElement(beforeChildren, {
            ...props,
          });
          memoryRef.current.children = cloneChildren;
          update();
        }
      },
    }),
    [],
  );
  return memoryRef.current.isValidElement ? memoryRef.current.children : null;
});

function useComponentProps<Props>(component: React.ReactElement<Props>) {
  const memory = useRef({
    componentProps: {} as ComponentPropsInstance<Props>,
    component: (
      <ProxyComponent
        ref={(ref) => {
          Object.assign(memory.current.componentProps, ref);
        }}
      >
        {component}
      </ProxyComponent>
    ),
  });

  return [
    memory.current.componentProps,
    memory.current.component as React.ReactElement<Props>,
  ] as const;
}

export default useComponentProps;

[liuyib]

Similar to: #2302, but more general.

It's a good idea, Can you provide more examples of usage? thx

[xhh0223]

const demo = () => {
  const [showLoading, setShowLoading] = useState(true);
  return (
    <div>
      <div
        onClick={() => {
          setShowLoading(false);
        }
      >
        stop loading
      </div>
      <Loading visible={showLoading} />
    </div>
  );
};

const demo = () => {
  const [loadingPropsInstance, loadingComponent] = useComponentProps(<Loading visible={true}/>);
  return (
    <div>
      <div
        onClick={() => {
          loadingPropsInstance.setMergedProps({
            visible: false,
          });
        }}
      >
        stop loading
      </div>
      {loadingComponent}
    </div>
  );
};

[xhh0223]

dynamically changing the properties of a component, aggregating changes to its properties, improves code cohesion and does not result in re-rendering of the ancestor component

[xhh0223]

it can be for any component