Wiem, że to pytanie zadawano już kilka razy, ale w większości przypadków rozwiązaniem jest radzenie sobie z tym u rodzica, ponieważ przepływ odpowiedzialności jest tylko malejący. Czasami jednak musisz zabić komponent jedną z jego metod. Wiem, że nie mogę modyfikować jego właściwości, a jeśli zacznę dodawać wartości logiczne jako stan, zacznie się robić naprawdę bałagan dla prostego komponentu. Oto, co próbuję osiągnąć: Mały komponent pola błędu z „x”, aby go odrzucić. Otrzymanie błędu za pośrednictwem jego właściwości spowoduje wyświetlenie go, ale chciałbym znaleźć sposób na zamknięcie go z własnego kodu.

class ErrorBoxComponent extends React.Component {

  dismiss() {
    // What should I put here?
  }
  
  render() {
    if (!this.props.error) {
      return null;
    }

    return (
      <div data-alert className="alert-box error-box">
        {this.props.error}
        <a href="#" className="close" onClick={this.dismiss.bind(this)}>&times;</a>
      </div>
    );
  }
}


export default ErrorBoxComponent;

Użyłbym tego w następujący sposób w komponencie nadrzędnym:

<ErrorBox error={this.state.error}/>

W sekcji Co mam tu umieścić? , Już próbowałem:

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode); Co rzuca niezły błąd w konsoli:

Ostrzeżenie: unmountComponentAtNode (): Węzeł, który próbujesz odmontować, został wyrenderowany przez React i nie jest kontenerem najwyższego poziomu. Zamiast tego poproś komponent nadrzędny o zaktualizowanie swojego stanu i ponowne wyrejestrowanie w celu usunięcia tego komponentu.

Czy powinienem skopiować przychodzące właściwości w stanie ErrorBox i manipulować nimi tylko wewnętrznie?

Podobnie jak to miłe ostrzeżenie, które otrzymałeś, próbujesz zrobić coś, co jest anty-wzorcem w reakcji. To jest nie-nie. React ma na celu odłączenie od relacji rodzic-dziecko. Teraz, jeśli chcesz, aby dziecko się odmontowało, możesz to zasymulować za pomocą zmiany stanu w rodzicu, która jest wyzwalana przez dziecko. pokażę ci kod.

class Child extends React.Component {
    constructor(){}
    dismiss() {
        this.props.unmountMe();
    } 
    render(){
        // code
    }
}

class Parent ...
    constructor(){
        super(props)
        this.state = {renderChild: true};
        this.handleChildUnmount = this.handleChildUnmount.bind(this);
    }
    handleChildUnmount(){
        this.setState({renderChild: false});
    }
    render(){
        // code
        {this.state.renderChild ? <Child unmountMe={this.handleChildUnmount} /> : null}
    }

}

to jest bardzo prosty przykład. ale możesz zobaczyć szorstki sposób przekazania rodzicowi działania

Biorąc to pod uwagę, prawdopodobnie powinieneś przechodzić przez sklep (akcja wysyłkowa), aby Twój sklep zawierał prawidłowe dane, gdy ma być renderowany

Zrobiłem komunikaty o błędach / stanie dla dwóch oddzielnych aplikacji, obie przeszły przez sklep. Jest to preferowana metoda ... Jeśli chcesz, mogę opublikować kod, jak to zrobić.

EDYCJA: Oto jak skonfigurowałem system powiadomień za pomocą React / Redux / Typescript

Kilka rzeczy na początek. to jest w maszynie, więc musisz usunąć deklaracje typu :)

Używam pakietów npm lodash do operacji i nazw klas (alias cx) do przypisania w wierszu nazwy klasy.

Piękno tej konfiguracji polega na tym, że używam unikalnego identyfikatora dla każdego powiadomienia, gdy akcja je tworzy. (np. notify_id). Ten unikalny identyfikator to Symbol(). W ten sposób, jeśli chcesz usunąć jakiekolwiek powiadomienie w dowolnym momencie, możesz to zrobić, ponieważ wiesz, które z nich usunąć. Ten system powiadomień pozwoli Ci ułożyć tyle, ile chcesz, i znikną po zakończeniu animacji. Podłączam się do zdarzenia animacji i kiedy się kończy, uruchamiam kod, aby usunąć powiadomienie. Ustawiłem również rezerwowy limit czasu, aby usunąć powiadomienie na wypadek, gdyby wywołanie zwrotne animacji nie zostało uruchomione.

powiadomienia-działania.ts

import { USER_SYSTEM_NOTIFICATION } from '../constants/action-types';

interface IDispatchType {
    type: string;
    payload?: any;
    remove?: Symbol;
}

export const notifySuccess = (message: any, duration?: number) => {
    return (dispatch: Function) => {
        dispatch({ type: USER_SYSTEM_NOTIFICATION, payload: { isSuccess: true, message, notify_id: Symbol(), duration } } as IDispatchType);
    };
};

export const notifyFailure = (message: any, duration?: number) => {
    return (dispatch: Function) => {
        dispatch({ type: USER_SYSTEM_NOTIFICATION, payload: { isSuccess: false, message, notify_id: Symbol(), duration } } as IDispatchType);
    };
};

export const clearNotification = (notifyId: Symbol) => {
    return (dispatch: Function) => {
        dispatch({ type: USER_SYSTEM_NOTIFICATION, remove: notifyId } as IDispatchType);
    };
};

powiadomienie-reduktor.ts

const defaultState = {
    userNotifications: []
};

export default (state: ISystemNotificationReducer = defaultState, action: IDispatchType) => {
    switch (action.type) {
        case USER_SYSTEM_NOTIFICATION:
            const list: ISystemNotification[] = _.clone(state.userNotifications) || [];
            if (_.has(action, 'remove')) {
                const key = parseInt(_.findKey(list, (n: ISystemNotification) => n.notify_id === action.remove));
                if (key) {
                    // mutate list and remove the specified item
                    list.splice(key, 1);
                }
            } else {
                list.push(action.payload);
            }
            return _.assign({}, state, { userNotifications: list });
    }
    return state;
};

app.tsx

w podstawowym renderowaniu dla twojej aplikacji wyrenderowałbyś powiadomienia

render() {
    const { systemNotifications } = this.props;
    return (
        <div>
            <AppHeader />
            <div className="user-notify-wrap">
                { _.get(systemNotifications, 'userNotifications') && Boolean(_.get(systemNotifications, 'userNotifications.length'))
                    ? _.reverse(_.map(_.get(systemNotifications, 'userNotifications', []), (n, i) => <UserNotification key={i} data={n} clearNotification={this.props.actions.clearNotification} />))
                    : null
                }
            </div>
            <div className="content">
                {this.props.children}
            </div>
        </div>
    );
}

user-notification.tsx

klasa powiadamiania użytkownika

/*
    Simple notification class.

    Usage:
        <SomeComponent notifySuccess={this.props.notifySuccess} notifyFailure={this.props.notifyFailure} />
        these two functions are actions and should be props when the component is connect()ed

    call it with either a string or components. optional param of how long to display it (defaults to 5 seconds)
        this.props.notifySuccess('it Works!!!', 2);
        this.props.notifySuccess(<SomeComponentHere />, 15);
        this.props.notifyFailure(<div>You dun goofed</div>);

*/

interface IUserNotifyProps {
    data: any;
    clearNotification(notifyID: symbol): any;
}

export default class UserNotify extends React.Component<IUserNotifyProps, {}> {
    public notifyRef = null;
    private timeout = null;

    componentDidMount() {
        const duration: number = _.get(this.props, 'data.duration', '');
       
        this.notifyRef.style.animationDuration = duration ? `${duration}s` : '5s';

        
        // fallback incase the animation event doesn't fire
        const timeoutDuration = (duration * 1000) + 500;
        this.timeout = setTimeout(() => {
            this.notifyRef.classList.add('hidden');
            this.props.clearNotification(_.get(this.props, 'data.notify_id') as symbol);
        }, timeoutDuration);

        TransitionEvents.addEndEventListener(
            this.notifyRef,
            this.onAmimationComplete
        );
    }
    componentWillUnmount() {
        clearTimeout(this.timeout);

        TransitionEvents.removeEndEventListener(
            this.notifyRef,
            this.onAmimationComplete
        );
    }
    onAmimationComplete = (e) => {
        if (_.get(e, 'animationName') === 'fadeInAndOut') {
            this.props.clearNotification(_.get(this.props, 'data.notify_id') as symbol);
        }
    }
    handleCloseClick = (e) => {
        e.preventDefault();
        this.props.clearNotification(_.get(this.props, 'data.notify_id') as symbol);
    }
    assignNotifyRef = target => this.notifyRef = target;
    render() {
        const {data, clearNotification} = this.props;
        return (
            <div ref={this.assignNotifyRef} className={cx('user-notification fade-in-out', {success: data.isSuccess, failure: !data.isSuccess})}>
                {!_.isString(data.message) ? data.message : <h3>{data.message}</h3>}
                <div className="close-message" onClick={this.handleCloseClick}>+</div>
            </div>
        );
    }
}

zamiast używać

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);

spróbuj użyć

ReactDOM.unmountComponentAtNode(document.getElementById('root'));

W większości przypadków wystarczy po prostu ukryć element, na przykład w ten sposób:

export default class ErrorBoxComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isHidden: false
        }
    }

    dismiss() {
        this.setState({
            isHidden: true
        })
    }

    render() {
        if (!this.props.error) {
            return null;
        }

        return (
            <div data-alert className={ "alert-box error-box " + (this.state.isHidden ? 'DISPLAY-NONE-CLASS' : '') }>
                { this.props.error }
                <a href="#" className="close" onClick={ this.dismiss.bind(this) }>&times;</a>
            </div>
        );
    }
}

Lub możesz renderować / wyrenderować / nie renderować przez komponent nadrzędny w ten sposób

export default class ParentComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isErrorShown: true
        }
    }

    dismiss() {
        this.setState({
            isErrorShown: false
        })
    }

    showError() {
        if (this.state.isErrorShown) {
            return <ErrorBox 
                error={ this.state.error }
                dismiss={ this.dismiss.bind(this) }
            />
        }

        return null;
    }

    render() {

        return (
            <div>
                { this.showError() }
            </div>
        );
    }
}

export default class ErrorBoxComponent extends React.Component {
    dismiss() {
        this.props.dismiss();
    }

    render() {
        if (!this.props.error) {
            return null;
        }

        return (
            <div data-alert className="alert-box error-box">
                { this.props.error }
                <a href="#" className="close" onClick={ this.dismiss.bind(this) }>&times;</a>
            </div>
        );
    }
}

Wreszcie jest sposób na usunięcie węzła html, ale naprawdę nie wiem, czy to dobry pomysł. Może ktoś, kto zna Reacta od wewnątrz, powie coś na ten temat.

export default class ErrorBoxComponent extends React.Component {
    dismiss() {
        this.el.remove();
    }

    render() {
        if (!this.props.error) {
            return null;
        }

        return (
            <div data-alert className="alert-box error-box" ref={ (el) => { this.el = el} }>
                { this.props.error }
                <a href="#" className="close" onClick={ this.dismiss.bind(this) }>&times;</a>
            </div>
        );
    }
}

Byłem w tym poście około 10 razy i chciałem tylko zostawić tutaj swoje dwa centy. Możesz po prostu odmontować go warunkowo.

if (renderMyComponent) {
  <MyComponent props={...} />
}

Wszystko, co musisz zrobić, to usunąć go z DOM, aby go odmontować.

Tak długo, jak renderMyComponent = truekomponent będzie renderowany. Jeśli ustawisz renderMyComponent = false, odmontujesz go z DOM.

Nie jest to właściwe we wszystkich sytuacjach, ale możesz warunkowo return falsewewnątrz samego komponentu, jeśli określone kryteria są lub nie są spełnione.

Nie odmontowuje komponentu, ale usuwa całą renderowaną zawartość. Moim zdaniem byłoby to złe tylko wtedy, gdyby w komponencie były detektory zdarzeń, które należy usunąć, gdy komponent nie jest już potrzebny.

import React, { Component } from 'react';

export default class MyComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            hideComponent: false
        }
    }

    closeThis = () => {
        this.setState(prevState => ({
            hideComponent: !prevState.hideComponent
        })
    });

    render() {
        if (this.state.hideComponent === true) {return false;}

        return (
            <div className={`content`} onClick={() => this.closeThis}>
                YOUR CODE HERE
            </div>
        );
    }
}