我正在尝试在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>