Question

我正在尝试在react中创建一个组件，该组件会在需要时折叠和扩展。为此，我正在使用react-pose。但是，在尝试嵌套此组件的多个时遇到了问题。

这是我定义组件的方式：

Offset

这是我使用的地方。

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> ); } }“姿势”似乎传递给了内部div，这意味着当您扩展外部div时，内部div也将扩展。内部<CollapsableDiv>似乎对外部<CollapsableDiv>的影响不同。

这是问题https://codesandbox.io/s/x7nljvom9z?fontsize=14

的示例

我在这里做错什么了吗？不能重复使用相同的组件吗？

Answer 1

使其与第二个withParent={false}的父集合CollapsableDiv“独立”。例如：

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

反应姿势状态影响子组件姿势

1 个答案: