时间戳

首页 > 解决方案 > 更改道具值外部反应并重新加载组件

javascript - 更改道具值外部反应并重新加载组件

问题描述

正如标题所说，我想在外部 js 文件中更改 props 的值并重新加载组件。

<div data-group=""></div>

//external.js
const popupChat = document.getElementById('popupChatComponent');
popupChat.setAttribute('data-group', groupId);

//component.ts
export default class PopupChatRoot extends React.Component {
    private readonly groupId: string;

    constructor(props) {
        super(props);
        this.groupId = this.props.group;
    }

    render() {
        return (
            <div className="modal-body">
                <p>{this.groupId}</p>
            </div>
        );
    }
}

const component = document.getElementById('popupChatComponent');
if (component) {
    const props = Object.assign({}, component!.dataset);
    render(<PopupChatRoot {...props}/>, component);
}

我怎么能做到这一点？

标签： javascriptreactjs

解决方案

您可以做的是使用包装器组件或更高阶的组件，它为您的组件提供这些道具，并让该包装器组件与您的外部 javascript 代码集成。

这是我用来做类似事情的 HOC：

export interface MyHocProps {
    //the props you want to provide to your component
    myProp: any;
}

export const withMyHOC = <T extends any>(params: any) =>

<P extends MyHocProps>(WrappedComponent: React.ComponentType<P>): React.ComponentClass<defs.Omit<P, keyof MyHocProps>> => {

    return class extends React.PureComponent<defs.Omit<P, keyof MyHocProps>> {

        //here you have access to params, which can contain anything you want
        // maybe you can provide some sort of observable which causes this to re-render

        render() {

            return <WrappedComponent
                {...this.props}
                myProp={/*whatever*/}
            />;
        }
    }
};

从这里，您可以将此 HOC 与某种系统集成以将更改推送到它。我建议使用可观察的。基本上你想让这个 HOC 组件订阅一些可观察数据的变化，然后在它发生变化时强制它自己重新渲染。

或者，如果它只是一个单例，您可以通过执行类似的操作在组件上公开一些方法window.reloadThisComponent = this.reload.bind(this);，但这可能应该被视为最后的手段。

推荐阅读