Question

我制作了一个网页（嵌入页面），将第二个网页的内容（嵌入页面）嵌入到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>
    )
}

通过具有单一事实来源的React Router Dom向下传递状态

0 个答案: