我制作了一个网页(嵌入页面),将第二个网页的内容(嵌入页面)嵌入到iframe中。嵌入式页面在轮播中呈现照片。当用户单击照片时,嵌入页面将显示有关他们选择的照片的数据。元数据会冒泡到达父组件(单个事实来源),但不会将更新后的状态传递给嵌入页面。我知道是因为我在使用iframe吗?
以下是我的父组件中的状态:
this.state = {
galleryId: '66911286-72157647277042064',
imgs: [],
metaData: []
}
下面是用于在用户选择照片(位于父组件中)时设置状态的功能
handleSelect = id => {
const {extras} = this.state
const infoToDisplay = extras.filter(ele => {
if (ele.id === id) {
return ele
}
})
this.setState({metaData: infoToDisplay})
}
这些是我用来导航页面(父组件)的路线
render() {
console.log(this.state.metaData)
const meta = this.state.metaData
return (
<div>
<Switch>
<Route path='/inner' component={this.handleEmbedded}/>
<Route
exact
path="/"
render={(state) => {
return <Embedding metaData={this.state.metaData}/>
}}/>
</Switch>
</div>
);
}
显示信息的组件(子级)
class Embedding extends React.Component {
render() {
const {metaData} = this.props
const info = metaData
console.log('props', this.props)
return (
<div width='100%'>
<h1>Hello, world</h1>
{info
? metaData.map(ele => {
return <p>Id: {info.id}</p>
})
: ''}
<iframe title="myiframe" src="/inner" width="100%" height="800px"></iframe>
</div>
)
}