Reachjs 전환 - 왜이 일이 아닌가?

StackOverflow https://stackoverflow.com//questions/24006368

문제

다른 요소로 변경 될 때 하나의 요소를 전환하고 싶습니다.

3 예제 :

내가 원하는 것은 두 번째 시도의 매우 약간의 변화 인

옵션 1 : 

/** @jsx React.DOM */

var ReactTransitionGroup = React.addons.TransitionGroup;

var TodoList = React.createClass({
  getInitialState: function() {
    return {items: ['hello', 'world', 'click', 'me']};
  },
  handleAdd: function() {
    var newItems =
      this.state.items.concat([prompt('Enter some text')]);
    this.setState({items: newItems});
  },
  handleRemove: function(i) {
    var newItems = this.state.items;
    newItems.splice(i, 1)
    this.setState({items: newItems});
    },

    render: function() {
        var items = this.state.items.map(function(item, i) {
            return (
                <div key={item} onClick={this.handleRemove.bind(this, i)}>
                    {item}
                </div>
            );
        }.bind(this));

        return (
            <div>
                <div><button onClick={this.handleAdd} /></div>
                <ReactTransitionGroup transitionName="example">
                    {items}
                </ReactTransitionGroup>
            </div>
        );
    }
});

var app = React.renderComponent(<TodoList />, document.body);
.

옵션 2 : JSX가 작동하지 않지만, 내가하고 싶은 일에 더 가깝습니다 (실제로, 한쪽보기를 숨기고 다른보기를 보여줍니다) 

/** @jsx React.DOM */

var ReactTransitionGroup = React.addons.TransitionGroup;

var Test = React.createClass({
  getInitialState: function() {
    return {showOne:true}
  },
  onClick: function() {
    this.setState({showOne:! this.state.showOne});
  },
    render: function() {
      var result;
      if (this.state.showOne)
      {
        result = <div ref="a">One</div>
      }
      else 
      {
        result = <div ref="a">Two</div>
      }

        return (
            <div>
                <div><button onClick={this.onClick}>switch state</button></div>
                <ReactTransitionGroup transitionName="example">
                    {result}
                </ReactTransitionGroup>
            </div>
        );
    }
});

var app = React.renderComponent(<Test />, document.body);
.

옵션 3 : 숨기기 / 표시를 사용하여 2 개의보기를 주위에 유지하지만 여전히 작동하지 않습니다. 

/** @jsx React.DOM */

var ReactTransitionGroup = React.addons.TransitionGroup;

var Test = React.createClass({
  getInitialState: function() {
    return {showOne:true}
  },
  onClick: function() {
    this.setState({showOne:! this.state.showOne});
  },
    render: function() {
      var result;
      var c1 = this.state.showOne ? "hide" : "show";
      var c2 = this.state.showOne ? "show" : "hide";


      return (
            <div>
                <div><button onClick={this.onClick}>switch state</button></div>
                <ReactTransitionGroup transitionName="example">
        <div className={c1}>One</div>
        <div className={c2}>Two</div>
                </ReactTransitionGroup>
            </div>
        );
    }
});

var app = React.renderComponent(<Test />, document.body);
.

너무 긴 이야기 짧은 - 하나의 주요 "구성 요소"에서 다른 주요 "구성 요소"에서 다른 것으로 전환 할 수 있도록 어떻게 전환 할 수 있습니까? 나는 그 이유를 얻지 못하지 않지만 옵션 2는 그렇지 않습니다!

도움이 되었습니까?

해결책

반응은 그 모든 것이 변경 되었기 때문에 DOM의 내용을 변경하는 것입니다.요소를 애니메이션으로 만드는 요소 고유 키를 제공하십시오. 

  if (this.state.showOne)
  {
    result = <div key="one">One</div>
  }
  else 
  {
    result = <div key="two">Two</div>
  }
.

jsfiddle

다른 팁

React-Router (1.0.1)를 사용하여 비슷한 문제를 해결하기 위해 Michelle Treys 답변을 사용했습니다.키가 필요한 API에서 명확하지 않습니다.나는 다음과 같이 부모의 경로를 부모로 렌더링하는 것에 대한리스 라우터 제안을 받았습니다. 

render() {
    return (
        <div id='app-wrapper'>
          <ReactTransitionGroup component='div' className='transition-wrapper'>
            {this.props.children}
          </ReactTransitionGroup>
        </div>
    );
  }
.

그러나 ComponentWillEnter는 페이지로드에서만 트리거되었습니다.Michelle의 해결책을 따르면, 나는리스 라우터 업데이트 당 자녀를 복제하고 다음과 같이 키를 추가했습니다. 

render() {

    const { location } = this.props;

    return (
        <div id='app-wrapper'>
          <ReactTransitionGroup component='div' className='transition-wrapper'>
            {React.cloneElement(this.props.children, {
              key: location.pathname,
            })}
          </ReactTransitionGroup>
        </div>
    );
  }
.

수정 사항에 감사드립니다.건배

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top