道具不应该在React中发生变化。这正是道具和状态之间的区别。React实现这一点的方法是使用状态作为计数。您可以将计数的初始状态作为道具传递，并执行以下操作：const [count, setCount] = useState(initialCount)。您的onClick处理程序将递增count，这也是state。我知道这不是您想要的，但这是React的工作方式。

在React Props中，无法在子组件中更改值，但可以在父组件中进行更改。

const GreetingWithCounter = (props) => {
  const { name, count, updateCount } = props;

  return (
    <div>
      <div>Hello {name}</div>
      <button onClick={updateCount}>{count}</button>
    </div>
  );
};

function App() {
  const [count, setCount] = useState(0);

  const updateCount = () => {
    setCount(count + 1);
  };

  return (
    <div className='App'>
      <h1>Greeting With Counter:</h1>
      <GreetingWithCounter
        name='Alice'
        count={count}
        updateCount={updateCount}
      />
    </div>
  );
}

感谢您想要指出的变化和您想要添加的价值，但可能有一些点，您错过了什么React在概念上试图提供props和state之间的分离。

• React附带的组件中的道具在概念上被专门设计为不可变的，正如本文中的文档所示。*

因此，你试图做的事情在概念上不适合这个目的，并且违反了React试图完成的目标。
事实上，你可能会提到创建另一个库/框架，在引入**props are the new state**概念时成功地完成了它，但在这个特定的例子中，没有可能的方法以React的方式成功。

你不能改变子组件中的props值，但你有两种方法来处理它，我假设你只想在子组件中使用count，而不需要父组件中的count值，在这种情况下，你可以使用props.count作为初始状态，类似如下：

const GreetingWithCounter = props => {
  const [count, setCount] = useState(props.count);
  const { name } = props;

  return (
    <div>
      <div>Hello {name}</div>
      <button onClick={() => setCount(prevState => prevState + 1)}>{count}</button>
    </div>
  );
};

<GreetingWithCounter name="Alice" count={0} />;

但如果要从父级访问它的值，最好将setter传递给子级
这样的东西：

const GreetingWithCounter = ({name,count,setCount}) => {
  

  return (
    <div>
      <div>Hello {name}</div>
      <button onClick={() => setCount(prevState => prevState + 1)}>{count}</button>
    </div>
  );
};

const App = ()=>{
  const [count, setCount] = useState(0);
  return (<GreetingWithCounter name="Alice" count={count} setCount={setCount} />)
}

或者如果它的子节点太深，需要向它的所有树发送道具，最好使用状态管理，如Redux、Context或...

这是你想要的方式吗？：

import React from 'react'
import ReactDOM from 'react-dom'

export default function renderComponent(Component, props, container) {
    ReactDOM.render(<Component {...props} />, container)
}

你想做的事情违背了国家管理的React哲学。正确的方法，你可以检查其他答案，甚至你自己已经张贴在问题。
但是如果你真的想这么做，在它的魔力背后，React也只是JavaScript。因此，我们只需要在React思维方式之外实现render函数。我们知道React在状态改变魔力或属性改变时重新呈现。我们只需要以某种方式将你要求的render方法与set state连接起来。类似下面的东西应该可以工作。

const ParentStuff = () => {
    const [props, setProps] = useState({ name: "Alice", count: 0 });
    render = setProps;

    return (<GreetingWithCounter name={props.name} count={props.count} />);
}

let render;

const GreetingWithCounter = props => {
  const { name, count } = props;

  return (
    <div>
      <div>Hello {name}</div>
      <button onClick={() => render({ ...props, count: count + 1 })}>{count}</button>
    </div>
  );
};

很多人会对上面的代码尖叫，它肯定偏离了预期的用途。
如果你想更进一步，你也可以只为整个应用程序设置一个状态，并将此状态传递给每个组件。瞧！你刚刚创建了一个单例状态和一个单向数据流，这是一个糟糕的redux版本，这可能会降低Web应用程序的性能，因为在文本框中键入每个字母等操作将重新呈现整个页面。

正如其他人已经提到的，组分在React中是受控的或不受控的（或两者的混合）。
如果你把状态保留在组件本身-它是不受控制的。你可以通过改变key属性从父组件重置它的状态到内部。
如果您将状态保留在父级中-它是受控组件，并通过属性/回调更改其状态。
你在你的例子中所展示的，你想用一些语法糖来实现不受控制的组件。
实施示例：

const usePropsWithRender = (props) => {
  const [currentProps, setCurrentProps] = useState(props);
  return {
    ...currentProps,
    render: setCurrentProps,
  };
};

const GreetingWithCounter = (props) => {
  const { name, count, render } = usePropsWithRender(props);

  return (
    <div>
      <div>Hello {name}</div>
      <button onClick={() => render({ ...props, count: count + 1 })}>
        {count}
      </button>
    </div>
  );
};

您可以在整个项目中重用usePropsWithRender，但它只不过是useState的一个简单的 Package 器，我看不出它比直接使用useState有什么好处。