如何为无关联的React组件修改输入文本颜色？

因为Page和PencilCase是NotePad的同级子组件，最符合React设计理念的方案是把颜色状态提升到共同父组件NotePad中，再通过props将状态和修改方法传递给子组件，完全不需要依赖localStorage或Context（当然Context也可以用，后面会补充正确写法）。

1. 改造父组件 NotePad.jsx #

在父组件里维护颜色状态，并提供修改状态的方法，分别传给两个子组件：

import { useState } from 'react';
import Page from './Page';
import PencilCase from './PencilCase';

function NotePad() {
  // 默认文本颜色设为黑色
  const [textColor, setTextColor] = useState('#000000');

  // 处理颜色变更的回调，传给PencilCase
  const handleColorPick = (color) => {
    setTextColor(color);
  };

  return (
    <div className="note-pad">
      {/* 把当前颜色传给Page */}
      <Page textColor={textColor} />
      {/* 把颜色修改方法传给PencilCase */}
      <PencilCase onColorPick={handleColorPick} />
    </div>
  );
}

export default NotePad;

2. 改造 PencilCase.jsx 和 Pencil.jsx #

PencilCase接收父组件的回调，传递给每个Pencil子组件，点击时触发颜色变更：

PencilCase.jsx #

import Pencil from './Pencil';

function PencilCase({ onColorPick }) {
  // 自定义可选颜色列表
  const colorList = ['#ff4444', '#00C851', '#33b5e5', '#ffbb33', '#aa66cc'];

  return (
    <div className="pencil-case">
      {colorList.map(color => (
        <Pencil 
          key={color} 
          color={color} 
          onClick={() => onColorPick(color)} 
        />
      ))}
    </div>
  );
}

export default PencilCase;

Pencil.jsx #

function Pencil({ color, onClick }) {
  return (
    <div
      className="pencil"
      style={{ backgroundColor: color, cursor: 'pointer' }}
      onClick={onClick}
    />
  );
}

export default Pencil;

3. 改造 Page.jsx #

接收父组件传递的颜色值，直接应用到输入框样式：

function Page({ textColor }) {
  return (
    <div className="page">
      <input
        type="text"
        style={{ color: textColor, fontSize: '16px', padding: '8px' }}
        placeholder="输入文本..."
      />
    </div>
  );
}

export default Page;

为什么你之前的方案失败？ #

• localStorage方案：只存值但没监听变化，React组件不会自动感知localStorage的更新，需要手动加window.addEventListener('storage', ...)来触发组件重新渲染，反而麻烦。
• Context API方案：大概率是写法有误——要么没在父组件外层包裹Provider，要么子组件没正确用useContext取到值。如果非要用Context，参考下面的正确实现：

可选方案：Context API 正确写法 #

1. 创建 ColorContext.js

import { createContext, useState, useContext } from 'react';

const ColorContext = createContext();

// 提供状态的Provider组件
export function ColorProvider({ children }) {
  const [textColor, setTextColor] = useState('#000000');
  return (
    <ColorContext.Provider value={{ textColor, setTextColor }}>
      {children}
    </ColorContext.Provider>
  );
}

// 自定义Hook简化调用
export function useColor() {
  return useContext(ColorContext);
}

2. 在根组件包裹Provider

import { ColorProvider } from './ColorContext';
import NotePad from './NotePad';

function App() {
  return (
    <ColorProvider>
      <NotePad />
    </ColorProvider>
  );
}

3. Page组件用Context取颜色

import { useColor } from './ColorContext';

function Page() {
  const { textColor } = useColor();
  return (
    <div className="page">
      <input
        type="text"
        style={{ color: textColor }}
        placeholder="输入文本..."
      />
    </div>
  );
}

4. Pencil组件用Context修改颜色

import { useColor } from './ColorContext';

function Pencil({ color }) {
  const { setTextColor } = useColor();
  return (
    <div
      className="pencil"
      style={{ backgroundColor: color }}
      onClick={() => setTextColor(color)}
    />
  );
}

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