Child 组件在 parent 更改 prop 时不会重新渲染

Question

parent 组件：

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 } />
...
)

child 组件：

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

return (<div></div>)

child 不应该因为 prop 改变而重新渲染吗？

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 的唯一原因是常数值不会改变

Child 组件在 parent 更改 prop 时不会重新渲染

Child component does not rerender when parent changes prop

render

web-component

reactjs

use-effect

use-state