Реакция состояния позы влияет на позы дочерних компонентов - PullRequest
Новая
       33

Реакция состояния позы влияет на позы дочерних компонентов

0 голосов
/ 07 марта 2019

Я пытаюсь создать компонент в реакции, который рушится и расширяется при необходимости.Для этого я использую реагирующую позу.Однако при попытке вложения нескольких компонентов я сталкиваюсь с проблемами.

Вот как я определяю свой компонент: 

const CollapsableDiv = posed.div({
  show: {
    height: 'auto',
    overflow: 'hidden'
  },
  hide: {
    height: '0px',
    overflow: 'hidden'
  }
});

И вот где я его использую. 

class App extends React.Component {
  state = { 
    showing: false, 
    showingInner: false 
  };

  toggleShow = () => this.setState({
    showing: !this.state.showing
  });

  toggleInner = () => this.setState({
    showingInner: !this.state.showingInner
  });

  render() {
    return (
      <React.Fragment>
        <button onClick={this.toggleShow}>
          {this.state.showing?'Hide':'Show'}
        </button>
        <CollapsableDiv pose={ this.state.showing ? 'show' : 'hide' }>
          <div>
            This is some content
            <button onClick={this.toggleInner}>
              {this.state.showingInner ? 'Hide' : 'Show'}
            </button>
            <CollapsableDiv pose={this.state.showingInner ? 'show' : 'hide'}>
              <div>
                This is some inner content    
              </div>
            </CollapsableDiv>
          </div>
        </CollapsableDiv>
      </React.Fragment>
    );
  }
}

Проблема, с которой я столкнулся, заключается в том, что внешняя <CollapsableDiv> «поза» кажется переданной внутреннему, что означает, что когда вы расширяете внешний div, внутренний также расширяется.Внутреннее <CollapsableDiv>, похоже, не оказывает такого же влияния на внешнее.

Вот пример проблемы https://codesandbox.io/s/x7nljvom9z?fontsize=14

Я что-то здесь не так делаю?Разве нельзя повторно использовать один и тот же компонент?

1 Ответ

4 голосов
/ 07 марта 2019

Чтобы сделать его "независимым" от родительского набора withParent={false} на втором CollapsableDiv.Например: 

<CollapsableDiv
  pose={this.state.showingInner ? "show" : "hide"}
  withParent={false}
>
  <div key="two">This is some inner content</div>
</CollapsableDiv>
...