Question

父组件：

const Parent =
...
var render = {};
render.value = false;
...

return (
<div>
  <button onClick= { () => {render.value = ! render.value; console.log(render);} } >Change Prop</button>
</div>
<Child render = { render } />
...
)

子组件：

const Child = ({render}) => {
  
    useEffect(() => {
        console.log('This does not show up when i click parents button');
    }, [render]);

return (<div></div>)

由于道具变更，孩子是否应该重新渲染？

Answer 1

我认为您没有正确更新render值。试试这个：

const Parent = () => {
   const [render, setRender] = useState({})

  return (
     <div>
       <button onClick={() => setRender({...render, value: false})} >Change 
         Prop
       </button>
       <Child render={render} />
     </div>
  )
}

将父级的状态设置为新值，这会将其作为道具传递给child并触发子级组件中的渲染

请记住在React组件中使用state来获取会更改且需要传递为props的值。不使用state的唯一原因是不变的常量值

父母更改道具时，子组件不会重新渲染

1 个答案: