如何在反应中使用上下文 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' 的 msg 以让来自 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>
    </>
  )
}

将上下文视为您不想一直传递下去的远在天边的支柱是有帮助的。这很有用，因为仅此而已。

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

你必须通过很多组件将它传递下去，其中一些确实与该道具没有任何关系

不使用上下文的原因：

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

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

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

How to update data from child component to parent component using context api in react?

javascript

reactjs

react-state-management

react-context