在多个 div 中的 div 上显示或隐藏 React

Question

我试图根据下拉点击呈现一个组件。

这是我的代码

const App = () => {
    const [showPlayer, setShowPlayer] = useState();

    const switchVisibleDiv = ({divNumber}) => {
        setShowPlayer({showPlayer: divNumber})
    }

    return(
        <>
            <DropdownButton id="dropdown-basic-button" title="Dropdown Menu">
                {data.map((info, index) => (
                    <Dropdown.Item key={index} onClick={() => switchVisibleDiv(index)}>Title - {data.title}</Dropdown.Item>
                ))}
            </DropdownButton>

            {data.map((video, index) => (
            (showPlayer === index ?
                <Plyr
                key={index}
                options={options}
                source={{
                    type: 'video',
                    title: 'Example title',
                    sources: [
                        {
                        `${video.video_url}`,
                        type: 'video/mp4',
                        size: 1080,
                        }
                    ]
                    }}
                />
                : null)
            ))}
        </>
    )
}

但它似乎不起作用，我从这里的答案中获取了参考，这是一个类组件，并尝试将其转换为函数组件。

Link to answer

Answer 1

你需要设置一个数字而不是一个对象：

    const switchVisibleDiv = (divNumber) => {
        setShowPlayer(divNumber})
    }

您可以做的另一件事是删除该函数并从这里简单地设置状态：

<DropdownButton id="dropdown-basic-button" title="Dropdown Menu">
                {data.map((info, index) => (
                    <Dropdown.Item key={index} onClick={() => setShowPlayer(index)}>Title - {data.title}</Dropdown.Item>
                ))}
            </DropdownButton>

PS：使用其他东西代替index 作为key。不推荐。

Answer 2

您应该为DropdownButton 组件更改此callback 函数。

const switchVisibleDiv = (divNumber) => {
    setShowPlayer(divNumber)
}

这样就可以了，原来的方法是Class Component格式，在Functional Component中，我们不这样使用，只需将divNumber作为setShowPlayer setter函数的参数传递即可。

然后就可以了。