如何在Fresh（Preact）中实现子组件向兄弟组件传递数据？

你的代码存在几处关键错误，导致运行后无内容显示，以下是问题分析和修正后的完整实现：

问题点梳理 #

• Context使用混淆：组件中应该调用useContext(Form1Context)而非useContext(Form1Provider)，Provider是用于包裹组件的上下文容器，不是上下文本身
• Provider值传递不完整：自定义的Form1Provider只传递了form1Data，没有包含更新数据的函数，导致子组件无法修改上下文状态
• 根组件上下文使用错误：App中直接使用Form1Context.Provider传递固定值"dark"，没有用上自定义的Form1Provider来管理状态
• useState解构错误：useState返回的是数组，不是对象，不能用对象解构语法

修正后的完整代码 #

1. 上下文文件：islands/FormContext.jsx #

import { createContext, useState } from "preact";

// 创建上下文，默认值包含数据和更新函数
export const FormContext = createContext({
  form1Data: "Form 1 placeholder",
  setForm1Data: () => {},
});

// 自定义Provider组件，管理状态并传递给子组件
export function FormProvider({ children }) {
  const [form1Data, setForm1Data] = useState("Form 1 placeholder");

  return (
    <FormContext.Provider value={{ form1Data, setForm1Data }}>
      {children}
    </FormContext.Provider>
  );
}

2. Form1组件：islands/Form1.jsx #

import { useContext } from "preact/hooks";
import { FormContext } from "./FormContext.jsx";

export default function Form1() {
  const { form1Data, setForm1Data } = useContext(FormContext);

  return (
    <textarea
      value={form1Data}
      onInput={(e) => setForm1Data(e.target.value)}
      placeholder="输入Form1内容"
      style={{ width: "100%", height: 100, marginBottom: 10 }}
    />
  );
}

3. Form2组件：islands/Form2.jsx #

import { useContext, useState } from "preact/hooks";
import { FormContext } from "./FormContext.jsx";

export default function Form2() {
  const { form1Data } = useContext(FormContext);
  // useState返回数组，用数组解构
  const [form2Data, setForm2Data] = useState("Form 2 placeholder");

  return (
    <>
      <textarea
        value={form2Data}
        onInput={(e) => setForm2Data(e.target.value)}
        placeholder="输入Form2内容"
        style={{ width: "100%", height: 100, marginBottom: 10 }}
      />
      <p>拼接结果：{form1Data + form2Data}</p>
    </>
  );
}

4. 根页面组件：routes/index.jsx #

import { FormProvider } from "../islands/FormContext.jsx";
import Form1 from "../islands/Form1.jsx";
import Form2 from "../islands/Form2.jsx";

export default function Home() {
  return (
    <div style={{ maxWidth: 600, margin: "20px auto", padding: 0 20 }}>
      <h1>跨组件表单数据拼接</h1>
      {/* 用自定义Provider包裹两个表单组件 */}
      <FormProvider>
        <Form1 />
        <Form2 />
      </FormProvider>
    </div>
  );
}

实现说明 #

• 自定义FormProvider统一管理Form1的状态，将数据和更新函数通过上下文传递给子组件
• Form1通过上下文获取更新函数，实时修改Form1的输入内容
• Form2通过上下文获取Form1的数据，结合自身输入内容完成拼接展示
• 所有组件都放在islands/目录下，符合Fresh的岛屿组件规范，确保客户端交互正常

内容的提问来源于stack exchange，提问作者Ooker