反应姿势状态会影响儿童成分姿势



我正在尝试在React中创建一个组件,该组件在需要时崩溃并扩展。为此,我正在使用反应姿势。但是,我在尝试嵌套此组件的多个时遇到问题。

这是我定义组件的方式:

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>似乎对外部的影响没有相同的影响。

以下是问题的示例

我在这里做错了吗?是否不可能重新使用相同的组件?

将其从第二个CollapsableDiv上的父集withParent={false}制成"独立"。例如:

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

相关内容

  • 没有找到相关文章

最新更新