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

时间:2018-08-11 15:36:43

标签: javascript reactjs react-router-dom

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

0 个答案:

没有答案