ReactJS 函数式组件“this”关键字问题

Question

我搜索了类似的问题，但没有一个能解决我的疑问。在这种情况下，如何将“this”更改为反应功能组件：<SimpleStorage parent={this}/>，其中该组件属于一个库（称为 react-simple-storage）并编写在功能组件内。 我看到的所有示例都涉及this.state 或this.object 或this.function，但没有一个是关于this 单独的。

const Books = () => { 
...  
return <Router>  
            <SimpleStorage parent={this}/> 
            <Routes/>
       </Router>

当我尝试以这种方式运行时，他运行但控制台抛出：

No "parent" prop was provided to react-simple-storage. A parent component's context is required in order to access and update the parent component's state.
            
Try the following: <SimpleStorage parent={this} />

如何设置功能组件的组件状态？我必须在父组件中实例化一个变量吗？有什么可以做的吗？

Answer 1

此库旨在与类组件一起使用，因此最好使用该类型的组件。

但是，如果查看 lib 的源代码，您会发现 parent 使用了两个 props：state 和 setState，因此您可以创建一个状态容器来保存所有功能组件状态：

const [state, setState] = useState(initState);

然后将其传递给：

<SimpleStorage parent={{state, setState}} />