本文详解如何在 react 应用中，通过状态提升（lifting state up）或 context api 将 firstsection 的输入值安全、清晰地传递至 secondsection，并提供可运行的代码示例与最佳实践建议。
本文详解如何在 react 应用中，通过状态提升（lifting state up）或 context api 将 firstsection 的输入值安全、清晰地传递至 secondsection，并提供可运行的代码示例与最佳实践建议。
在 React 开发中，跨组件传递用户输入数据是一个高频需求。你当前的结构中，FirstSection 与 SecondSection 是两个独立渲染的组件，且由 App 统一控制显示逻辑（通过 checkSection 状态切换）。此时，最推荐、最符合 React 数据流原则的方案是「状态提升」——将共享状态（如 input1、input2）提升至共同父组件 App 中管理，并通过 props 或 Context 向下分发。
下面以两种主流方式展开说明，均基于你提供的代码结构进行重构优化：
✅ 方式一：状态提升 + Props 传递（简洁直接，推荐初学者使用）
这是最直观、易调试的方式。修改核心逻辑如下：
App.js
import React, { useState } from 'react';
import { FirstSection } from './components/FirstSection';
import { SecondSection } from './components/SecondSection';
function App() {
const [showSecondSection, setShowSecondSection] = useState(false);
const [inputValues, setInputValues] = useState({ input1: '', input2: '' });
const handleContinue = (values) => {
setInputValues(values);
setShowSecondSection(true);
};
return (
<div className="App">
{showSecondSection ? (
<SecondSection inputValues={inputValues} />
) : (
<FirstSection onContinue={handleContinue} />
)}
</div>
);
}
export default App;FirstSection.jsx
import { useState } from 'react';
export function FirstSection({ onContinue }) {
const [input1, setInput1] = useState('');
const [input2, setInput2] = useState('');
const handleSubmit = () => {
onContinue({ input1, input2 });
};
return (
<>
<input
type="text"
value={input1}
onChange={(e) => setInput1(e.target.value)}
placeholder="Enter input 1"
/>
<input
type="text"
value={input2}
onChange={(e) => setInput2(e.target.value)}
placeholder="Enter input 2"
/>
<button onClick={handleSubmit}>Continue</button>
</>
);
}SecondSection.jsx
export function SecondSection({ inputValues }) {
return (
<div>
<h2>Received Data:</h2>
<p><strong>Input 1:</strong> {inputValues.input1}</p>
<p><strong>Input 2:</strong> {inputValues.input2}</p>
<button onClick={() => window.history.back()}>← Back</button>
</div>
);
}✅ 优势：无额外依赖、逻辑清晰、便于单元测试；
⚠️ 注意：若组件嵌套层级加深（如FirstSection → ChildForm → Button），需逐层透传onContinue，此时可考虑方式二。
✅ 方式二：Context API（适合中大型应用或深层嵌套场景）
当组件树变深，或多个兄弟组件需共享同一份表单状态时，Context 提供更优雅的解耦方案：
// Context.js
import { createContext, useContext, useState } from 'react';
const FormContext = createContext();
export const FormProvider = ({ children }) => {
const [inputValues, setInputValues] = useState({ input1: '', input2: '' });
return (
<FormContext.Provider value={{ inputValues, setInputValues }}>
{children}
</FormContext.Provider>
);
};
export const useFormContext = () => {
const context = useContext(FormContext);
if (!context) throw new Error('useFormContext must be used within FormProvider');
return context;
};在 App.js 中包裹 Provider，并分别在 FirstSection 和 SecondSection 中消费：
// App.js（片段）
import { FormProvider } from './Context';
function App() {
const [showSecondSection, setShowSecondSection] = useState(false);
return (
<FormProvider>
<div className="App">
{showSecondSection ? <SecondSection /> : <FirstSection />}
</div>
</FormProvider>
);
}FirstSection 内部调用 setInputValues，SecondSection 直接读取 inputValues —— 实现零 props 穿透。
? 关键注意事项
-
受控组件必须配
onChange：你原代码中<input value="{input1}">是错误写法（字符串字面量），应为value={input1}并绑定onChange，否则输入无法响应； -
避免在
SecondSection中初始化 state 存储传入值：直接使用 props 或 context 值即可，除非需要二次编辑并保持独立状态； -
类型安全建议：搭配 TypeScript 可提前约束
inputValues结构，防止undefined访问； -
重置逻辑可选：若用户返回
FirstSection需清空输入，可在onClick回调中重置input1/input2状态。
无论选择哪种方式，核心思想一致：数据流自上而下，状态由单一可信源（Single Source of Truth）管理。这不仅保障了可预测性，也为后续添加验证、持久化或异步提交打下坚实基础。
