- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在 React js 应用程序中,我试图在 section1 页面中创建上下文数据以在所有答案页面中使用它,关键是所有答案必须是 section1 的子项,因为我可以传输数据但是有单独的页面并具有路由,那么我如何使用上下文提供程序包装 React 路由器,或者是否有不同的方法来处理它?</p>
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Header from './component/Header/Header';
import Intro from './pages/Intro';
import Section1 from './pages/Section1';
import Section2 from './pages/Section2';
import AllAnswer from './pages/AllAnswer';
function App() {
return (
<BrowserRouter>
<Header/>
<Routes>
<Route path='/' element={<Intro />}/>
<Route path='/section1' element={<Section1 />} />
<Route path='/section2' element={<Section2/>}/>
<Route path='/all-answer' element={<AllAnswer />}/>
</Routes>
</BrowserRouter>
);
}
export default App;
import React , { useState, createContext} from 'react'
import { Link } from 'react-router-dom'
export const sectionOneContext = createContext("");
function Section1() {
const [value1, setValue1] = useState('both')
const [value2, setValue2] = useState('')
const [value3, setValue3] = useState('')
const data = {
answer1: value1,
answer2: value2,
answer3: value3
}
return (
<sectionOneContext.Provider value={data}>
<div className='container'>
<div className='col-md-8 shadow p-3 mb-5 bg-body rounded my-5 mx-auto '>
<h2 className='text-center'>Section 1</h2>
<ol className="list-group list-group-numbered">
<li className="list-group-item">
Is your business model B2C or B2B or both?
<ol type='A' className='my-2'>
<li>B2C</li>
<li>B2B</li>
<li>both</li>
</ol>
<input type='text' onChange={(e)=> setValue1(() =>{
e.target.value.toLowerCase())}} />
</li>
{value1 === 'b2b' ||value1 === 'both' ?
<li className="list-group-item">
Do you target all age brackets?
<ol type='A' className='my-2'>
<li>yes</li>
<li>No</li>
</ol>
<input type='text' onChange={(e)=> setValue2(() =>{
e.target.value.toLowerCase())}} value={value2}/>
</li>
: null
}
{value1 === 'b2c' ||value1 === 'both' ?
<li className="list-group-item">
Do you target all industries?
<ol type='A' className='my-2'>
<li>yes</li>
<li>No</li>
</ol>
<input type='text'onChange={(e)=> setValue3(() => {
e.target.value.toLowerCase())} value={value3}/>
</li>
: null }
</ol>
<Link to='/all-answer'>
<button type="button" className="btn btn-dark ms-auto d-block">
Next
<i className="fa-solid fa-arrow-right-long ms-2"></i>
</button>
</Link>
</div>
</div>
</sectionOneContext.Provider>
)
}
export default Section1
import React,{useContext} from 'react'
import {sectionOneContext} from './Section1'
function AllAnswer() {
const {answer1} = useContext(sectionOneContext)
console.log(answer1)
return (
<div>AllAnswer</div>
)
}
export default AllAnswer
最佳答案
为了在路由之间共享数据,数据必须存在于 App
中。因此,您应该在应用程序中而不是在 section1 中创建上下文,并在上下文中提供一个函数来像这样更改它:
....
export const sectionOneContext = useContext({});
....
function App() {
const [data, setData] = useState({});
return (
<BrowserRouter>
<sectionOneContext.Provider value={{data, setData}}>
....
</sectionOneContext.Provider>
</BrowserRouter>
);
}
并在任何其他需要拥有或修改此数据的组件中执行以下操作:
import { useContext } from "react";
import { sectionOneContext } from "./App";
function component(){
const {data, setData} = useContext(sectionOneContext);
return (
....
);
}
关于javascript - 如何使用上下文提供程序包装 React-router,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71175158/
出现以下错误 Network access for Distributed Transaction Manager (MSDTC) has been disabled. Please enable D
在调试应用程序时出现以下错误。 The CLR has been unable to transition from COM context 0x3b2d70 to COM context 0x3b2
在 GAE Go 中,为了记录,我们需要使用 appengine.NewContext(r) 创建一个新的上下文,它返回 context.Context。 如何使用此上下文在请求范围内设置/获取变量?
我想使用 Puppeteer 从放置在页面上 iframe 内的选择器中获取数据,该页面在与其父框架域不同的域上运行。因此,我不是任何域的所有者 - 无法使用 frame.postMessage。 试
我正在尝试获取可用的应用程序上下文并想切换到 webview 上下文,但 appium 仅获取 Navive App。 应用程序还启用了 WebView。 Appium 版本:1.10.1 Chrom
这个问题在这里已经有了答案: How to fix this nullOk error when using the flutter_svg package? (7 个回答) 7 个月前关闭。 当我尝
我观看了关于 Core Data 的 2016 WWDC 视频并查看了各种教程。我见过使用 Core Data Framework 创建对象以持久保存到 managedObjectContext 中的
这是代码 obj = { a: 'some value'; m: function(){ alert(this.a); } } obj.m(); 结果是'som
我正在尝试做类似的事情 $(".className").click(function() { $(this).(".anotherClass").css("z-index","1");
var User = { Name: "Some Name", Age: 26, Show: function() { alert("Age= "+this.Age)}; }; fun
我目前正在使用我见过的常见 Context 模式,它允许子组件通过传递修饰函数来更新父组件的状态(即 Provider)通过共享的 Context。 我遇到的问题是,修改函数只引用原始状态,不引用最新
有没有办法让 React Context类型安全与流类型? 例如: Button.contextTypes = { color: React.PropTypes.string }; 最佳答案 不幸
我想知道是否有一种方法可以为不同的功能使用不同的上下文类。 我希望有一个功能使用 MinkExtensions 进行浏览器测试,另一个功能使用和 HTTP 客户端(如 Guzzle)进行 API 测试
我有这个配置文件 apiVersion: v1 clusters: - cluster: server: [REDACTED] // IP of my cluster name: stag
我在实现非抢先式调度时遇到了用于初始化TCB的代码。 typedef struct TCB_t { struct TCB_t *next; struct TCB_t
我想将一个函数设置为数组中每个元素的属性,但使用不同的参数调用它。我想我会使用匿名函数来解决它: for ( var i = 0; i < object_count; i++ ) { obje
这个问题已经有答案了: How to access the correct `this` inside a callback (15 个回答) 已关闭 7 年前。 我正在做一些练习,但我在管道方法中丢
我正在尝试通过 Java 和 Android Studio 学习和制作 Android 应用程序。我对Java的了解程度是两年前几个小时的youtube学习和大学基础类(class)。不过我确实知道如
我在(这个)上遇到了问题。错误ImageView无法应用。我在 fragment 类中执行此代码。 ViewFlipper v_flipper; @Nullable @Override public
我想使用 openGL 的某些功能,但与渲染视觉内容无关。有没有办法在没有任何依赖性的情况下创建它(不是对 Windows,也不是某些包[SDL,SFML,GLUT])?只允许使用没有外部库的库,就像
我是一名优秀的程序员,十分优秀!