react.js: 구성 요소 제거

react.js: 구성 요소 제거

나는 reaction.js에 꽤 익숙하지 않기 때문에 어떤 도움이라도 대단히 고맙게 생각한다.

나는 이것을 가지고 있다: https://jsfiddle.net/rzjyhf91/

여기서 나는 이미지와 버튼이라는 두 가지 구성요소를 만들었다.

버튼 클릭으로 이미지를 제거하는 것이 목표다.unmountComponentAtNode그러나 그것은 효과가 없다.

var App = React.createClass({
  render: function() {
    return (
    <div><MyImage /><RemoveImageButton /></div>
    );
  }
});

var MyImage = React.createClass({
  render: function() {
    return (
      <img id="kitten" src={'http://placekitten.com/g/200/300'} />
    );
  }
});

var RemoveImageButton = React.createClass ({
  render: function() {
    return (
      <button onClick={this.handleClick}>remove image</button>
    )
  },
  handleClick: function(){
    React.unmountComponentAtNode(document.getElementById('kitten'));   
  }
});

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

다른 구성 요소에서 반응 구성 요소를 제거하는 방법

음, 디스플레이 컨트롤이 어떻게 처리되는지 다시 생각해봐야 할 것 같아.반응이란 격리된 구성 요소에 대한 것이므로 상위 구성 요소에 의해 마운트된 구성 요소를 분리해서는 안 된다.대신, 당신은 콜백을 사용해야 한다.props그런 일을 해내기 위해서 말이야

실제 구현은 사용 사례에 따라 다르지만, https://jsfiddle.net/nt99zzmp/1/에서 해당 예제의 최신 버전을 확인하십시오.

var App = React.createClass({
  render: function() {
    var img = this.state.showImage ? <MyImage /> : '';
    return (
    <div>{img}<RemoveImageButton clickHandler={this.removeImage} /></div>
    );
  },
  
  getInitialState: function() {
      return {
          showImage: true
      };
  },
  
  removeImage: function() {
      this.setState({ showImage: false });
  }
});

var MyImage = React.createClass({
  render: function() {
    return (
      <img id="kitten" src={'http://placekitten.com/g/200/300'} />
    );
  }
});

var RemoveImageButton = React.createClass ({
  render: function() {
    return (
      <button onClick={this.props.clickHandler}>remove image</button>
    )
  }
});

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

기본적으로 구성요소를 제거하는 것은 React에서 이치에 맞지 않으며, 기본적으로 React를 포함한 모든 최신 및 새로운 JavaScript 라이브러리에서 jQuery 방법을 생각한다면, 구성요소를 관리해야 한다.state또는 aroute이러한 것들을 다루기 위해서, 요소나 구성 요소를 삭제하는 것은 예를 들어 반응이나 각도에서 이러한 것들을 하는 좋은 방법이 아니다.

예를 들어, 이 경우 부울이 있을 수 있으며, 사실일 경우 이미지를 표시하거나, 그렇지 않으면 이미지를 숨기거나, 구성 요소의 다른 요소를 반환하십시오.

따라서 이 경우, 다른 방식으로 반환되는 구성 요소는props또는state…이런 것:

////
var MyImage = React.createClass({
  render: function() {
    if(this.state.showImage) {
      return (
        <img id="kitten" src={'http://placekitten.com/g/200/300'} />
      );
    } else {
      return<p>no image!</p>;
    }
  }
});
////

이 예에서 설정한 경우this.state.render = false, 구성 요소가 DOM에서 제거됨:

  render() {
    const { render } = this.state;
    if (render === false) return null;
    return (<p>I am here as long as render isn't false</p>);
  }

참조URL: https://stackoverflow.com/questions/27227792/react-js-removing-a-component