嘿,有人能告诉我在AppHeader关闭之后如何移动renderTabContent内容吗?目前,它不能覆盖整个屏幕,其原因是我也有一个徽标,因此内容会在其后呈现。我尝试了很多可能性,但仍然感到很困惑。每一个帮助将不胜感激。
class TabsExampleSampleContent extends Component {
static propTypes = {
name: PropTypes.string,
onChange: PropTypes.func,
value: PropTypes.element
};
state = {
value: this.props.value
};
onChange = event => {
this.props.onChange(event);
this.setState({
value: event.target.value
});
};
render() {
return (
<div>
{this.state.value}
</div>
);
}
}
function createTabContent(name) {
const ContentComponent = props => (
<TabsExampleSampleContent
key={name}
name={name}
onChange={event => {
cachedState[name] = event.target.value;
}}
value={cachedState[name]}
{...props}
/>
);
ContentComponent.displayName = `sampleTab-${name}`;
return ContentComponent;
}
const Search = 'Search';
const Add = 'Add';
const Update = 'Update';
const cachedState = {
[Search]: <SearchContent />,
[Add]: <AddContent />,
[Update]: <UpdateContent />
};
const SampleTabs = {
[Search]: createTabContent(Search),
[Add]: createTabContent(Add),
[Update]: createTabContent(Update)
};
function renderTabContent({ getTabContentProps, value }) {
const SampleTab = SampleTabs[value];
return <SampleTab {...getTabContentProps()} />;
}
renderTabContent.propTypes = {
getTabContentProps: PropTypes.func,
value: PropTypes.string
};
const TabsApp = ({ onChange, onDeselect }) => (
<div>
<AppHeader
data-testod="hearder"
position="static"
renderNav={({ getNavProps }) => (
<div {...getNavProps({})} >
<Tabs
centered
noBorder
defaultValue={Search}
displayName={'centeredExample'}
onChange={onChange}
onDeselect={onDeselect}
render={({ getTabProps }) => <Tab {...getTabProps()} />}
renderTabContent={renderTabContent}
tabs={[Search, Add, Update]}
/>
</div>
)}
/>
// I want to be moved here
</div>
);
TabsApp.propTypes = {
onChange: PropTypes.func,
onDeselect: PropTypes.func
};
export { TabsApp };