我有一个带有链接的标头，每个链接都指向不同的画廊查看器，因此我希望每个画廊在渲染时都显示一个唯一的默认大图像。下面的父组件负责获取从子组件中单击的画廊索引，并将图像传递给另一个孩子。
class App extends Component {
constructor(props) {
super(props);
this.state = {
onViewIndex: -1,
defaultImageLarge: "./images/sala-large/04_sl02_BB.jpg"
}
this.handlePickerClick = this.handlePickerClick.bind(this);
}
handlePickerClick(index) {
this.setState({onViewIndex: index});
if(index == 1) {
this.setState({defaultImageLarge: "./images/sala-large/04_sl02_BB.jpg"});
console.log("changed large image to sala");
}
else if(index == 2) {
this.setState({defaultImageLarge: "./images/qto-large/04_qt01_BB.jpg"});
console.log("changed large image to " + this.state.defaultImageLarge);
}
else if(index == 3) {
this.setState({defaultImageLarge: "./images/hall-large/04_det03_BB.jpg"});
console.log("changed large image to " + this.state.defaultImageLarge);
}
else if(index == 4) {
this.setState({defaultImageLarge: "./images/ban-large/04_ban01_BB.jpg"});
console.log("changed large image to " + this.state.defaultImageLarge);
}
}
render() {
return (
<div id = "page-container" align = "center">
<Header />
<Banner />
<div className = "section-header"><h2 className = "section-header-text">PORTFOLIO</h2></div>
<GalleryPicker onClick = {this.handlePickerClick}/>
<GalleryView onView = {this.state.onViewIndex} imageLarge = {this.state.defaultImageLarge}/>
</div>
);
}
}
我的GalleryView组件从imageLarge道具接收到正确的图像，但不会使用它来更新其状态：
class GalleryView extends Component {
constructor(props) {
super(props);
this.getImageList = this.getImageList.bind(this);
this.changeImage = this.changeImage.bind(this);
this.state = {
imageLarge: this.props.imageLarge
}
}
changeImage(address) {
this.setState({imageLarge: address})
}
getImageList(index) {
//SALAS
if(index == 1) {
return (
<div>
<div id = "gallery-list-container">
<ul className = "list-view">
<li className = "list-view-item">
<img src = {require("./images/sala-small/04_sl02_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/04_sl02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/04_sl03_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/04_sl03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/04_sl04_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/04_sl04_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/05_sl01_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/05_sl01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/05_sl02_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/05_sl02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/13_sl01_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/13_sl01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/13_sl02_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/13_sl02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/13_sl03_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/13_sl03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/13_sl04_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/13_sl04_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/13_sl05_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/13_sl05_BB.jpg')}/>
</li>
</ul>
<br/>
<ul className = "list-view">
<li className = "list-view-item">
<img src = {require("./images/sala-small/14_sl01_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/14_sl01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/14_sl02_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/14_sl02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/14_sl04_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/14_sl04_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/15_sl01_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/15_sl01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/15_sl02_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/15_sl02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/15_sl03_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/15_sl03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/16_sl01_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/16_sl01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/16_sl02_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/16_sl02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/16_sl03_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/16_sl03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/16_sl04_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/16_sl04_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc = {this.state.imageLarge} />
</div>
);
}
//QUARTOS
else if(index == 2) {
alert(this.props.imageLarge);
alert(this.state.imageLarge);
return (
<div>
<div id = "gallery-list-container">
<ul className = "list-view">
<li className = "list-view-item">
<img src = {require("./images/qto-small/04_qt01_SS.jpg")}
onClick = {() => this.changeImage('./images/qto-large/04_qt01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/qto-small/04_qt02_SS.jpg")}
onClick = {() => this.changeImage('./images/qto-large/04_qt02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/qto-small/14_qt01_SS.jpg")}
onClick = {() => this.changeImage('./images/qto-large/14_qt01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/qto-small/16_qt01_SS.jpg")}
onClick = {() => this.changeImage('./images/qto-large/16_qt01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/qto-small/17_qt01_SS.jpg")}
onClick = {() => this.changeImage('./images/qto-large/17_qt01_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc = {this.state.imageLarge} />
</div>
);
}
//HALL
else if(index == 3) {
alert(this.props.imageLarge);
return (
<div>
<div id = "gallery-list-container">
<ul className = "list-view">
<li className = "list-view-item">
<img src = {require("./images/hall-small/04_det03_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/04_det03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/04_det04_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/04_det04_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/16_det03_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/16_det03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/17_det01_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/17_det01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/18_det01_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/18_det01_BB.jpg')}/>
</li>
<br/>
<li className = "list-view-item">
<img src = {require("./images/hall-small/04_ee01_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/04_ee01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/05_ee02_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/05_ee02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/05_ee03_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/05_ee03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/14_sl03_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/14_sl03_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc = {this.state.imageLarge} />
</div>
);
}
//BANHEIROS
else if(index == 4) {
return (
<div>
<div id = "gallery-list-container">
<ul className = "list-view">
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_ban01_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_ban01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_ban03_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_ban03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_ban04_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_ban04_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_ban05_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_ban05_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_det01_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_det01_BB.jpg')}/>
</li>
<br/>
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_det02_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_det02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_det09_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_det09_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/14_ban01_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/14_ban01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/18_ban01_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/18_ban01_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc = {this.state.imageLarge} />
</div>
);
}
}
render() {
return (
<div>
<div id = "gallery-view-container">
{this.getImageList(this.props.onView)}
</div>
</div>
);
}
}
这里似乎是什么问题？
答案 0 :(得分：1)
您需要在prop发生更改时更新状态，或者直接使用prop而不创建本地状态...
看看： https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
答案 1 :(得分：1)
这是getDerivedStateFromProps
class GalleryView extends Component {
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.imageLarge !== prevState.imageLarge) {
return {
imageLarge: nextProps.imageLarge,
..
};
}
return null;
}
constructor(props) {
super(props);
this.getImageList = this.getImageList.bind(this);
this.changeImage = this.changeImage.bind(this);
this.state = {
imageLarge: this.props.imageLarge
}
}
答案 2 :(得分：0)
问题是您有2个状态未正确同步。您有一些选择。您当然可以使用getDerivedStatesFropProps；但是我会将子级更改为功能组件以使用父级的状态，以便每当父级状态更改时，都会重新呈现子级并自动更新。这样，您将不需要同步两个状态，因为您只有一个。
在父母中
<GalleryView getImageList={this.getImageList} changeImage={this.changeImage} imageLarge = {this.state.defaultImageLarge} index={this.state.onViewIndex} onView = {this.state.onViewIndex} />
还有孩子
GalleryView = (getImageList, changeImage, imageLarge, index, onView) => {
//SALAS
if (index == 1) {
return (
<div>
<div id="gallery-list-container">
<ul className="list-view">
<li className="list-view-item">
<img
src={require("./images/sala-small/04_sl02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/04_sl02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/04_sl03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/04_sl03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/04_sl04_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/04_sl04_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/05_sl01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/05_sl01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/05_sl02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/05_sl02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/13_sl01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/13_sl01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/13_sl02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/13_sl02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/13_sl03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/13_sl03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/13_sl04_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/13_sl04_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/13_sl05_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/13_sl05_BB.jpg')}/>
</li>
</ul>
<br/>
<ul className="list-view">
<li className="list-view-item">
<img
src={require("./images/sala-small/14_sl01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/14_sl01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/14_sl02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/14_sl02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/14_sl04_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/14_sl04_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/15_sl01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/15_sl01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/15_sl02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/15_sl02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/15_sl03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/15_sl03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/16_sl01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/16_sl01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/16_sl02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/16_sl02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/16_sl03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/16_sl03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/16_sl04_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/16_sl04_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc={imageLarge}/>
</div>
//QUARTOS
);
} else if (index == 2) {
alert(imageLarge);
alert(imageLarge);
return (
<div>
<div id="gallery-list-container">
<ul className="list-view">
<li className="list-view-item">
<img
src={require("./images/qto-small/04_qt01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/qto-large/04_qt01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/qto-small/04_qt02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/qto-large/04_qt02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/qto-small/14_qt01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/qto-large/14_qt01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/qto-small/16_qt01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/qto-large/16_qt01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/qto-small/17_qt01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/qto-large/17_qt01_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc={imageLarge}/>
</div>
//HALL
);
} else if (index == 3) {
alert(imageLarge);
return (
<div>
<div id="gallery-list-container">
<ul className="list-view">
<li className="list-view-item">
<img
src={require("./images/hall-small/04_det03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/04_det03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/04_det04_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/04_det04_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/16_det03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/16_det03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/17_det01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/17_det01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/18_det01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/18_det01_BB.jpg')}/>
</li>
<br/>
<li className="list-view-item">
<img
src={require("./images/hall-small/04_ee01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/04_ee01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/05_ee02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/05_ee02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/05_ee03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/05_ee03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/14_sl03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/14_sl03_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc={imageLarge}/>
</div>
//BANHEIROS
);
} else if (index == 4) {
return (
<div>
<div id="gallery-list-container">
<ul className="list-view">
<li className="list-view-item">
<img
src={require("./images/ban-small/04_ban01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_ban01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/04_ban03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_ban03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/04_ban04_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_ban04_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/04_ban05_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_ban05_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/04_det01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_det01_BB.jpg')}/>
</li>
<br/>
<li className="list-view-item">
<img
src={require("./images/ban-small/04_det02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_det02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/04_det09_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_det09_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/14_ban01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/14_ban01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/18_ban01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/18_ban01_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc={imageLarge}/>
</div>
);
}
return (
<div>
<div id="gallery-view-container">
{getImageList(onView)}
</div>
</div>
);
}
不过，我认为您的代码需要进一步审查。