如何在没有 Redux 的情况下将道具从一个组件传递到另一个组件答案

【问题标题】：How can I pass props from one component to another withour Redux如何在没有 Redux 的情况下将道具从一个组件传递到另一个组件
【发布时间】：2021-07-01 10:20:25
【问题描述】：

我有这种 jsx，我想将数值从 SendNumberPage 传递给 CheckNumberPage。

App.js

           <EditNumberPage/>
            <br/>
            <SendNumberPage/>
            <br/>
            <CheckNumberPage/>

SendNumberPage.js

function onChangeHandler(event) {
        setState({
            ...state,
            number: event.target.value
        })
    }

我尝试使用 React.createContext 但它对我不起作用。请帮忙

sendNumberPage.js

    const [state, setState] = useState(
        {
            number: '+99979787'
        }
    )

   const NumberContext = React.createContext()

   return (

<NumberContext.Provider value={state.number}>
<div>
....
....
</div>
</NumberContext.Provider>
  )

checkNumberPage.js

const CheckNumberPage = () => {
const value = useContext(NumberContext)
        console.log(value)
return (
.......
)
}

控制台显示尝试导入错误：“NumberContext”未从“./SendNumberPage”导出。

【问题讨论】：

reactjs.org/docs/lifting-state-up.html。基本上保持App 中的状态并将处理程序和数据传递给您的组件。
上下文如何不起作用？
我同意提升状态是一种可行的解决方案，但 React Context 也应该可以正常工作。如果您提供更多代码并让我们知道上下文出了什么问题，那就太好了。

标签： javascript reactjs redux

【解决方案1】：

根据您的应用程序的复杂程度，您可能希望以不同的方式执行此操作。

使用 react context api 是一个很好的方法，它具有可扩展性并且适用于所有应用程序大小。

您应该查看 react 教程。

如果您的应用非常小（1 层）并且您只想要“快速修复”，您可以将更改侦听器回调传递给一个组件并更新另一个组件中的 props。

       <EditNumberPage/>
            <br/>
            <SendNumberPage onChange={(n) => {setNumber(n)} />
            <br/>
            <CheckNumberPage number={number}/>

【讨论】：