我有两条路线/ abc和/ xyz。 当从一个路由到另一个路由更改时，网格布局保持不变，它的属性不会改变，但是在硬重载时，它们会被更改并给出预期的结果。 有以下两个类：
第1课：
export default class ConfigureWelcomeScreenGridLayout extends Component{
constructor(props){
super(props);
this.onLayoutChange=this.onLayoutChange.bind(this);
this.rendergrids=this.rendergrids.bind(this);
this.saveLayout=this.saveLayout.bind(this);
let layout=[{"i":"text",x:0,y:0,w:2,h:4},{"i":"image",x:4,y:5,w:2,h:4},{"i":"vedio",x:6,y:8,w:2,h:4}];
this.state={
layout:null,
render:false
}
}
onLayoutChange(layout,allLayouts){
// console.log(JSON.stringify(allLayouts));
console.log(this.state.layout);
this.setState({
layout:layout
});
console.log(this.state.layout);
}
saveLayout(){
let layout=[];
_.map(this.state.layout,function(item){
let grid={};
grid.x=item.x;
grid.y=item.y;
grid.h=item.h;
grid.w=item.w;
grid.i=item.i;
// console.log(grid);
layout.push(grid);
})
console.log(layout);
Meteor.call('saveGridLayout',layout,localStorage.getItem('token'),function(err,res){
if(res.status=="ok"){
FlowRouter.go("/");
}
})
}
rendergrids(el){
var removeStyle = {
position: 'absolute',
right: '2px',
top: 0,
cursor: 'pointer'
};
var i = el.add ? '+' : el.i;
if(el.i=="text"){
return (
<div key={el.i} className="grid-view" data-grid={el}>
{el.add ?
<span className="add text" title="You can add an item by clicking here, too.">Add +</span>
: <span className="text"><div className="grid-text break-word" dangerouslySetInnerHTML={{__html: this.props.configureDashboard ? this.props.configureDashboard.dashBoardText:""}}></div></span>}
<span className="remove" style={removeStyle} >x</span>
</div>
);
}
if(el.i=="vedio"){
return (
<div key={el.i} className="grid-view" data-grid={el}>
{el.add ?
<span className="add text" title="You can add an item by clicking here, too.">Add +</span>
: <span className="text">
<video autoPlay className="grid-video" controls>
<source src={this.props.configureDashboard ? this.props.configureDashboard.vedioUrl:""} type="video/mp4" />
Your browser does not support the video tag.
</video>
</span>}
<span className="remove" style={removeStyle} >x</span>
</div>
);
}
if(el.i=="image"){
return (
<div key={i} className="grid-view" data-grid={el}>
{el.add ?
<span className="add text" title="You can add an item by clicking here, too.">Add +</span>
: <span className="text"><img className="grid-image" src={this.props.configureDashboard ? this.props.configureDashboard.imageUrl:""} /></span>}
<span className="remove" style={removeStyle} >x</span>
</div>
);
}
}
render(){
if(this.props.configureIsReady && this.props.layoutIsReady ){
let layout=[ { x: 8, y: 0, h: 2, w: 3, i: 'text' }, { x: 5, y: 0, h: 2, w: 3, i: 'image' }, { x: 0, y: 0, h: 2, w: 5, i: 'vedio' } ];
return (
<div className="containar col-lg-12">
<ReactGridLayout onBreakpointChange={this.onBreakpointChange} onLayoutChange={this.onLayoutChange} width={1200}
breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}} rowHeight={30} >
{this.props.layout ? _.map(this.props.layout.layout,this.rendergrids) : _.map(layout,this.rendergrids)}
</ReactGridLayout>
<button onClick={this.saveLayout}>Save Layout</button>
</div>
)
}else{
return(
<Loader options={options}loaded={false} className="spinner">
</Loader>
)
}
}
}
export default createContainer(() => {
var handle1=Meteor.subscribe('configureDashboard',localStorage.getItem('token'));
let handle=Meteor.subscribe('gridLayout',localStorage.getItem('token'));
return {
configureDashboard: ConfigureDesktop.findOne(),
configureIsReady:handle1.ready(),
layout:GridLayout.findOne(),
layoutIsReady:handle.ready()
};
}, ConfigureWelcomeScreenGridLayout)
第2课：
export default class VenderDashbord extends Component {
constructor(props){
super(props);
this.onLayoutChange=this.onLayoutChange.bind(this);
this.rendergrids=this.rendergrids.bind(this);
let layout=[{"i":"text",x:6,y:0,w:2,h:4},{"i":"image",x:4,y:5,w:2,h:4},{"i":"vedio",x:0,y:8,w:2,h:4}];
this.state={
layout:null,
render:false
}
}
onLayoutChange(layout,allLayouts){
// console.log(JSON.stringify(allLayouts));
console.log(layout);
this.setState({
layout:layout
});
// console.log(this.state.layout);
}
componentDidMount(){
// console.log("inside the mount");
// let that=this;
// setTimeout(function(){
// if(that.props.layoutIsReady){
// console.log("hello inside the props ready");
// that.setState({
// layout:that.props.layoutVendor.layout,
// render:true
// })
// }
// },1000)
}
rendergrids(el){
var removeStyle = {
position: 'absolute',
right: '2px',
top: 0,
cursor: 'pointer'
};
var i = el.add ? '+' : el.i;
el.isDraggable=false;
el.isResizable=false;
if(el.i=="text"){
return (
<div key={el.i} data-grid={el}>
{el.add ?
<span className="add text" title="You can add an item by clicking here, too.">Add +</span>
: <span className="text"><div className="grid-text break-word" dangerouslySetInnerHTML={{__html: this.props.configureDashboard ? this.props.configureDashboard.dashBoardText:""}}></div></span>}
</div>
);
}
if(el.i=="vedio"){
return (
<div key={el.i} data-grid={el}>
{el.add ?
<span className="add text" title="You can add an item by clicking here, too.">Add +</span>
: <span className="text">
<video autoPlay className="grid-video" controls>
<source src={this.props.configureDashboard ? this.props.configureDashboard.vedioUrl:""} type="video/mp4" />
Your browser does not support the video tag.
</video>
</span>}
</div>
);
}
if(el.i=="image"){
return (
<div key={i} data-grid={el}>
{el.add ?
<span className="add text" title="You can add an item by clicking here, too.">Add +</span>
: <span className="text"><img className="grid-image" src={this.props.configureDashboard ? this.props.configureDashboard.imageUrl:""} /></span>}
</div>
);
}
}
render(){
if(this.props.configureIsReady && this.props.layoutIsReady ){
let layout=[];
return (
<div className="containar col-lg-12">
<ReactGridLayoutDashboard onBreakpointChange={this.onBreakpointChange} onLayoutChange={this.onLayoutChange} width={1200}
breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}} rowHeight={30}>
{this.props.layoutVendor ? _.map(this.props.layoutVendor.layout,this.rendergrids) : _.map(layout,this.rendergrids)}
</ReactGridLayoutDashboard>
</div>
)
}else{
return(
<Loader options={options}loaded={false} className="spinner">
</Loader>
)
}
}
};
export default createContainer(() => {
var handle1=Meteor.subscribe('configureDashboard',localStorage.getItem('token'));
let handle=Meteor.subscribe('gridLayout',localStorage.getItem('token'));
return {
configureDashboard: ConfigureDesktop.findOne(),
configureIsReady:handle1.ready(),
layoutVendor:GridLayout.findOne(),
layoutIsReady:handle.ready()
};
}, VenderDashbord)
当位置和大小发生反应时，布局不会发生变化/被动。 路线更改时旧布局布局仍然存在。 在此先感谢。