Вопрос по javascript, reactjs – Размонтирование узла React.js

44

Я пытаюсь размонтировать узел React.js сthis._rootNodeID

 handleClick: function() {

        React.unmountComponentAtNode(this._rootNodeID)

 }

Но это возвращаетсяfalse.

handleClick срабатывает, когда я нажимаю на элемент, и должен отключить корневой узел. Документация поunmountComponentAtNode Вот

Я пробовал это также:

React.unmountComponentAtNode ($ ( '* [данных reactid = " '+ this._rootNodeID +'"]') [0])

С этим селектором работаетjQuery.hide(), но не с размонтированием, в то время как документация утверждает, что это должно бытьDOMElementкак бы вы использовали дляReact.renderComponent

После нескольких тестов выясняется, что он работает нанемного элементы / селекторов.

Это как-то работает с селектором:document.getElementById('maindiv'), гдеmaindiv это элемент не сгенерированный с React.js, а просто HTML. Потом возвращаетсяtrue.

Но как только я пытаюсь выбрать другой ElementById, сгенерированный с помощью React.js, он возвращает false. И это не будет работать сdocument.body либо, хотя они все по сути возвращают одно и то же, если я их console.log (getElementsByClassName('bla')[0] тоже не работает)

Должен быть простой способ выбрать узел черезthisбез необходимости прибегать к jQuery или другим селекторам, я знаю, что он где-то там ..

(Этот вопрос был также размещен наgithub.com/facebook/react/issues/1044 и имеет ценные ответы там.) Sophie Alpert

Ваш Ответ

6   ответов
2

Вам не нужно размонтировать компонент, простое решение, это изменить состояние и сделать пустой div

const AlertMessages = React.createClass({
  getInitialState() {
    return {
      alertVisible: true
    };
  },
  handleAlertDismiss() {
    this.setState({alertVisible: false});
  },
  render() {
    if (this.state.alertVisible) {
      return (
        <Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}>
          <h4>Oh snap! You got an error!</h4>
        </Alert>
      );
    }
    return <div></div>
  }
});
75

Размонтируйте компоненты из того же элемента DOM, в который вы их монтировали. Поэтому, если вы сделали что-то вроде:

ReactDOM.render(<SampleComponent />, document.getElementById('container'));

Тогда вы бы размонтировали его:

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

Вотпростой JSFiddle где мы монтируем компонент, а затем отключаем его через 3 секунды.

@TrySpace Если вы хотите запустить размонтирование изнутри самого компонента, вы можете просто передать элемент DOM как опору и ссылаться на него при необходимости:http://jsfiddle.net/iamlacroix/JRy7W/2 Michael LaCroix
@MichaelLaCroix эй спасибо, но вчера вечером я справился, добавив отдельный контейнер для каждого подкомпонента, тогда удаление становится проще, поскольку у него есть свой собственный контейнер. Marconi
это не сработало, если я не сохранил ссылку в переменной TrySpace
это должен быть ReactDOM, лучше вы можете получить ReactDOM из вашего импорта user1452840
1

Во-первых, я новичок в реагировании тоже. Конечно, мы можем контролировать все компоненты, переключаягосударство , но, как я пытаюсь проверить, я понимаю, чтоReact.unmountComponentAtNode(parentNode) может только размонтировать компонент, который отображаетсяReact.render(<SubComponent>,parentNode), Так<SubComponent> быть удаленным должен быть добавленReact.render() метод, поэтому я пишу код

<script type="text/jsx">

    var SubComponent = React.createClass({
        render:function(){
            return (
                    <div><h1>SubComponent to be unmouned</h1></div>
            );
        },
        componentWillMount:function(){
            console.log("componentWillMount");
        },
        componentDidMount:function(){
            console.log("componentDidMount");
        },
        componentWillUnmount:function(){
            console.log("componentWillUnmount");
        }

    });

    var App = React.createClass({

        unmountSubComponent:function(){
            var node = React.findDOMNode(this.subCom);
            var container = node.parentNode;
            React.unmountComponentAtNode(container);
            container.parentNode.removeChild(container)
        },

        componentDidMount:function(){
            var el = React.findDOMNode(this)
            var container = el.querySelector('.container');
            this.subCom = React.render(<SubComponent/> ,  container);
        },

        render:function(){

            return (
                <div className="app">
                    <div className="container"></div>
                    <button onClick={this.unmountSubComponent}>Unmount</button>
                </div>
            )
        }
    });

    React.render(<App/> , document.body);
</script>

Запустите пример кода вjsFiddle и попробуйте.

Примечание: в примере кодаReact.findDOMNode заменяетсяgetDOMNode как проблема версии responsejs.

1

Как уже упоминалось впроблема GitHub, которую вы подали, если вы хотите получить доступ к DOM-узлу компонента, вы можете использоватьthis.getDOMNode(), Однако компонент не может размонтировать себя. Смотрите ответ Майкла для правильного способа сделать это.

a component can not unmount itself это может быть TrySpace
С реакцией 0.14.x this.getDOMNode устарел. Пожалуйста, используйте ReactDOM.findDOMNode (this.refs. [NodeName]) для пользовательских компонентов или this.refs [nodeName] для поддерживаемых тегов JSX. Con Antonakos
34

Это сработало для меня. Вы можете принять дополнительные меры предосторожности, еслиfindDOMNode возвращает ноль

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
У меня тоже сработало. Интересно, почему это проблема сейчас? Con Antonakos
Этот код вызывает исключение, если Component.render возвращает null (Component.getDOMNode () также возвращает null в этом случае). JuliaCesar
Этот код прекрасно работает для меня. ДобавивparentNode помогает мне удалить весь компонент React. Hoang Le
6

Пример, который я использую:

unmount: function() {
  var node = this.getDOMNode();
  React.unmountComponentAtNode(node);
  $(node).remove();
},

handleClick: function() {
  this.unmount();
}
Использует ли $ (узел) jQuery? garrettmaring

Похожие вопросы