我正在尝试在 React 中创建一个组件,它可以在需要时折叠和展开。为此,我使用react-pose。但是,我在尝试嵌套多个该组件时遇到了问题。
这是我定义组件的方式:
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>
“pose”似乎被传递到内部 div ,这意味着当您展开外部 div 时,内部 div 也会展开。内在<CollapsableDiv>
对外部似乎没有同样的影响。
这是问题的示例 https://codesandbox.io/s/x7nljvom9z?fontsize=14
我在这里做错了什么吗?难道不能重复使用同一个组件吗?
最佳答案
使其“独立于”第二个 CollapsableDiv
上的父集 withParent={false}
。例如:
<CollapsableDiv
pose={this.state.showingInner ? "show" : "hide"}
withParent={false}
>
<div key="two">This is some inner content</div>
</CollapsableDiv>
关于javascript - React 姿势状态影响子组件姿势,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55046935/