时间戳

首页 > 解决方案 > 如何检测 React 中的 props 变化？

javascript - 如何检测 React 中的 props 变化？

问题描述

我有 2 个组件：Radiobuttons和RadioOutput， whereRadioOutput接受来自Radiobuttons. 单击单选按钮后，我可以控制台记录道具更改，如下所示：

Radiobuttons.js

import React, { useState } from 'react';
import RadioOutput from './RadioOutput';

const Radiobuttons = () => {
    const [cause, setCause] = useState(null);
    const handleClick = (e) => {
        setCause(e.currentTarget.value)
    };
    return (
        <>
            <input type="radio" id="html" name="fav_language" value="HTML" onClick={handleClick}/>
            <label for="html">HTML</label><br />
            <input type="radio" id="css" name="fav_language" value="CSS" onClick={handleClick}/>
            <label for="css">CSS</label><br />
            <input type="radio" id="javascript" name="fav_language" value="JavaScript" onClick={handleClick}/>
            <label for="javascript">JavaScript</label>
            <RadioOutput cause={cause}/>
        </>
    )
};

export default Radiobuttons;

RadioOutput.js：

const RadioOutput = ({cause}) => {
    console.log(cause);
    return null;
};

export default RadioOutput;

我的问题是，有没有办法可以检测到causeinside的变化RadioOutput？也许是这样的：

const RadioOutput = ({cause}) => {
    // on change of cause, do something;
    return null;
};

标签： javascriptreactjs

解决方案

RadioOutputcauses每当值更改时将自动重新渲染。但是如果你想执行一些只依赖于值变化的副作用cause，你可以使用useEffect钩子。

useEffectcause每当值更改时将执行该函数。

更多关于useEffect这里 https://reactjs.org/docs/hooks-effect.html

import React, {useEffect} from "react";

const RadioOutput = ({cause}) => {

    useEffect(()=>{
      console.log("runs whenever cause changes")
    },[cause])

    return null;
};

推荐阅读