Могу ли я получить состояние подключенного компонента снаружи, используя ссылку?

Question

У меня есть регистратор, который отображает консоль отладки выглядит следующим образом:

class Logger {
    public init(props: LoggerInitProps) : void {
            (window as any).logger = this;
            this.consoleContainer = document.createElement('div');
            this.consoleContainer.classList.add('debug');
            const consoleProps = {
                ...props,
                ref: (el: any) => {
                    this.console = el;
                }
            };
            ReactDOM.render(
                React.createElement(DebugConsole, consoleProps as DebugConsoleProps),
                this.consoleContainer
            );
            document.body.appendChild(this.consoleContainer);
        }
    }
    ... other methods
}

Регистратор получает и подтверждает состояние debugConsole с помощью ref:

    protected renderMessage(type: string, data: any): void {
        const { messages } = this.console.state;
        let newMessages = [...];
        this.console.setState({messages: [...messages, ...newMessages]});
    }

Теперь мне нужны некоторые отправки, и мне нужноподключите консоль отладки, а затем оберните провайдера с хранилищем:

class DebugConsole<...> {
    constructor(props){
        state={messages: [...]}
    }
    render() {
        return <div> ... some code </div>
    }
}

const DebugConsoleConnect = connect(
    (state: State) => ({data: state.data}),
    (dispatch) => ({ dispatch }) 
)(DebugConsole);

export class ProviderDebugConsole extends React.Component {
    render() {
        return(
            <Provider store={appStore}>
                <DebugConsoleConnect props={this.props}/>
            </Provider>
        )
    }
}

Как я могу получить состояние debugConsole, используя старый код сейчас?Есть ошибка, когда я пытаюсь получить состояние из Providered debugConsole Property 'messages' does not exist on type 'Readonly<{}>'.

Я уже пытался передать ref со свойством {withRef: true}.Например:

connect(
    stateToProps, 
    dispatchToProps, 
    null, 
    {withRef: true}
)(Comp)

, но он все еще не работает.

Answer 1

Чтобы решить эту проблему, необходимо передать ref со свойством {forwardRef: true}.Как: в DebugConsole

export const ConnectedDebugConsole = connect(
    stateToProps,
    dispatchToProps,
    null,
    { forwardRef: true }
)(DebugConsole);

export class DebugConsoleProvider extends React.Component<{forwardRef: any}>{
    render() {
        return(
            <Provider store={appStore}>
                <ConnectedDebugConsole ref={this.props.forwardRef}/>
            </Provider>
        )
    }
}

в Logger

public init(props: LoggerInitProps) : void {
    if (!this.inited) {
    (window as any).logger = this;
    this.consoleContainer = document.createElement('div');
    this.consoleContainer.classList.add('debug');
    this.consoleContainer.classList.add('debug_hidden');
    const consoleProps = {
        ...props,
        forwardRef: (el: any) => {
            this.console = el;
        }
    };
    ReactDOM.render(
        React.createElement(DebugConsoleProvider, consoleProps),
        this.consoleContainer
    );
    document.body.appendChild(this.consoleContainer);

    ...
}

Работает.