Question

我有一个Carousel组件，每次页面更改时，应该将pageIndex传递给CurrentPage。不幸的是，它不起作用。当前页面组件应接收并检测轮播在App.tsx中设置的pageIndex道具上的更新。错误在哪里？

谢谢。

伪代码

滑动轮播
轮播>将pageIndex存储到data.pageIndex
CurrentPage>检索pageIndex
CurrentPage>检查pageIndex是否已更新
CurrentPage>呈现新的pageIndex

App.tsx

import { Data, Override } from 'framer'

const data = Data({ pageIndex: 0, totalPages: 0 })

export const Carousel: Override = props => {
    let pageProps = props.children[0].props

    data.totalPages = pageProps.children.length

    return {
        onChangePage(pageIndex) {
            console.log('Current page index', data.pageIndex)
            data.pageIndex = pageIndex + 1
        },
    }
}

export const CurrentPage: Override = () => {
    return {
        pageIndex: data.pageIndex,
    }
}

export const TotalPages: Override = () => {
    return {
        totalPages: data.totalPages,
    }
}

CurrentPage.tsx

import * as React from 'react'

type Props = { pageIndex: number }

export class CurrentPage extends React.Component<Props> {
    state = {
        pageIndex: 0,
    }

    componentDidUpdate(prevProps, prevState) {
        const watchlist = [ 'pageIndex' ]

        if (watchlist.some(prop => prevProps[prop] !== this.props[prop])) {
            console.log('Updated')
            this.setState({
                pageIndex: this.props.pageIndex,
            })
        }
    }

    render() {
        console.log('Page index is', this.props.pageIndex)
        return <div style={style}>{this.state.pageIndex}</div>
    }

    static defaultProps: Props = {
        pageIndex: 0,
    }
}

const style: React.CSSProperties = {
    height: '100%',
    display: 'flex',
    fontSize: '60px',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    color: '#FFFFFF',
    background: 'rgba(136, 85, 255, 0)',
    overflow: 'hidden',
}

ReactJS / FramerX-道具没有被传递

0 个答案: