以下是一个示例代码，展示了如何避免直接修改属性，而是通过回调函数来更新属性值：

import React, { useState } from 'react';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleCountChange = (newCount) => {
    setCount(newCount);
  };

  return (
    

      
    
  );
};

const ChildComponent = ({ count, onUpdateCount }) => {
  const handleClick = () => {
    const newCount = count + 1;
    onUpdateCount(newCount);
  };

  return (
    

      
Count: {count}
      Increase Count
    
  );
};

export default ParentComponent;

在这个例子中，父组件ParentComponent包含一个状态count和一个回调函数handleCountChange，用来更新count的值。父组件将count和handleCountChange作为属性传递给子组件ChildComponent。

子组件ChildComponent展示了count的值，并在按钮点击时调用handleClick函数。handleClick函数通过增加count的值，并调用父组件传递的onUpdateCount回调函数来更新count的值。这样，每当父组件重新渲染时，count的值不会被覆盖，因为它是通过回调函数来更新的。