如何在反应中使用上下文 api 将数据从子组件更新到父组件？

Question

我有两个组件 app.js 和 posts.js。

我的 app.js 组件

import React, { createContext, useState } from 'react'
import Posts from './components/Posts'

const val = createContext()

const App = () => {
  const msg = 'hi'

  return (
    <div>
      <val.Provider value={msg}>
        <Posts />
      </val.Provider>
    </div>
  )
}

export default App
export { val }

我的 Posts.js 组件

import React from 'react'
import { val } from '../App'
import { useContext } from 'react'

const Posts = () => {
  const greet = useContext(val)
  return <div>{greet}</div>
}

export default Posts

我想将消息从“hi”更新为从 Posts 组件中说“hello”，但我不知道如何做到这一点，有人可以帮助我理解包括值如何更改的流程吗？一世 谢谢

Answer 1

msg 需要是状态：

const App = () => {
  const state = useState('hi')

  return (
    <div>
      <val.Provider value={state}>
        <Posts />
      </val.Provider>
    </div>
  )
}

然后：

const Posts = () => {
  const [greet,setGreet] = useContext(val)
  return (
    <>
      <div>{greet}</div>
      <button onClick={() => setGreet('hello')}>Change to hello</button>
    </>
  )
}

将上下文视为您不想继续传递下去的远距离道具会很有帮助。这很有帮助，因为仅此而已。

使用上下文而不是道具的原因：

你必须通过很多组件来传递它，其中一些与那个 prop 没有任何关系

不使用上下文的原因：

您将组件与该上下文紧密耦合。

由您决定紧密耦合的权衡是否值得。有时他们是，有时他们不是。没有硬性规定。