反應不會在基於道具的按鈕單擊時呈現新組件

Question

我試圖制作一個 function 接受道具，然后在按鈕單擊時呈現組件，但由於某種原因，代碼不會在單擊時呈現任何組件，控制台日志中也沒有任何錯誤這里是代碼

const App = () => {
    const RenderVideoPlayer = (props) => {
        let videoSrc = {
            type: 'video',
            sources: [
                {
                  src: `${props.video_url}`,
                  type: 'video/mp4',
                  size: 1080
                }
            ],
            poster: '/path/to/poster.jpg',
        }
        return (
            <Plyr
                options={options}
                source={videoSrc}
            />
        )
    }


return (
<Button className="s-btn-1" variant="primary" onClick={() => RenderVideoPlayer(movie.video_info[0])}>Watch</Button>
)

我可以確認它正在接收道具 onclick

Answer 1

因為這根本不是 React 的工作方式。 將組件返回到onClick事件不會呈現該組件。 相反，將組件放在返回的 JSX 中，但根據 state 有條件地渲染它。 然后在點擊處理程序中簡單地更新 state。 例如：

const [showPlayer, setShowPlayer] = useState(false);

return (
  <>
    <Button onClick={() => setShowPlayer(true)}>Watch</Button>
    { showPlayer ? <Plyr ... /> : null }
  </>
);

這顯然非常簡單，但演示了這個概念。 例如，您可以使用!showPlayer而不是true將按鈕設置為顯示/隱藏切換。 或者您可以通過跟蹤 state 中顯示/隱藏的播放器來顯示/隱藏多個播放器，然后根據該 state 渲染它們的數組。 等等。

但主要的一點是，你不能只從事件處理程序返回 JSX 並期望 React 對此做任何事情。 依靠 state 來跟蹤渲染結果所需的所有信息。 JSX 在渲染中使用 state，事件更新 state。