Question

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

<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);
}

我该怎么做？

Answer 1

您可以做的是使用包装器组件或更高级别的组件，该组件将这些道具提供给您的组件，并使该包装器组件与您的外部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);之类的方法在组件上公开某个方法（如果它只是一个单例），但这可能是万不得已的方法。

Answer 2

这只是一个通用示例，它可以帮助您解决问题。其实我不认为您可以更改根节点的道具。

=IFERROR(AVERAGEIF(OFFSET($L$3,(ROW()-ROW($P$2))*5,,5),">50"),0)

更改道具价值，在场外反应并重新加载组件

2 个答案: