React中如何将SizeShirt组件的taille值传递到其他组件

针对你编写的SizeShirt组件，要将taille值传递到其他组件，以下是几种实用方案：

1. Props传递（父子/兄弟组件场景） #

如果需要接收taille的组件和SizeShirt是父子或兄弟关系，最直接的方式是通过回调函数把状态传递到共同父组件，再由父组件分发给其他组件。

改造SizeShirt组件 #

给组件添加回调属性，在状态更新时触发回调传递最新值：

import "./SizeShirt.css"
import React,{useState} from "react"

const SizeShirt = ({ onSizeChange }) => {
  const[taille,setTaille]=useState()

  const handleSizeChange = (value) => {
    setTaille(value);
    // 触发回调，把最新值传给父组件
    onSizeChange(value);
  }

  return (
    <>
        <h1>{taille}</h1>
        <input type="radio" className="btn-check" name="options" id="option1" autocomplete="off" value="S" onChange={e=>handleSizeChange(e.target.value)} />
        <label className="btn btn-primary" htmlFor="option1">S</label>

        <input type="radio" className="btn-check" name="options" id="option2" autocomplete="off" value="M" onChange={e=>handleSizeChange(e.target.value)} />
        <label className="btn btn-primary ms-2" htmlFor="option2">M</label>

        <input type="radio" className="btn-check" name="options" id="option3" autocomplete="off" value="L"  onChange={e=>handleSizeChange(e.target.value)}/>
        <label className="btn btn-primary ms-2" htmlFor="option3">L</label>

        <input type="radio" className="btn-check" name="options" id="option4" autocomplete="off" value="XL" onChange={e=>handleSizeChange(e.target.value)} />
        <label className="btn btn-primary ms-2" htmlFor="option4">XL</label>
    </>
  )
}

export default SizeShirt

父组件中传递状态给其他组件 #

在父组件里维护状态，再把taille传给需要的组件（比如Cart组件）：

import React, { useState } from "react";
import SizeShirt from "./SizeShirt";
import Cart from "./Cart";

const ParentComponent = () => {
  const [selectedSize, setSelectedSize] = useState();

  return (
    <div>
      <SizeShirt onSizeChange={setSelectedSize} />
      {/* 把选中的尺码传给Cart组件 */}
      <Cart size={selectedSize} />
    </div>
  );
};

export default ParentComponent;

2. Context API（跨多层组件/全局场景） #

如果组件层级较深，不想层层传递props，可以用React的Context API实现全局状态共享。

创建SizeContext #

新建SizeContext.js文件：

import React, { createContext, useState, useContext } from "react";

const SizeContext = createContext();

export const SizeProvider = ({ children }) => {
  const [selectedSize, setSelectedSize] = useState();

  return (
    <SizeContext.Provider value={{ selectedSize, setSelectedSize }}>
      {children}
    </SizeContext.Provider>
  );
};

// 自定义hook，简化消费Context
export const useSize = () => useContext(SizeContext);

在根组件中包裹Provider #

比如在App.js里：

import { SizeProvider } from "./SizeContext";
import SizeShirt from "./SizeShirt";
import OtherComponent from "./OtherComponent";

function App() {
  return (
    <SizeProvider>
      <SizeShirt />
      <OtherComponent />
    </SizeProvider>
  );
}

export default App;

修改SizeShirt组件消费Context #

import "./SizeShirt.css"
import React from "react"
import { useSize } from "./SizeContext";

const SizeShirt = () => {
  const { setSelectedSize, selectedSize } = useSize();

  return (
    <>
        <h1>{selectedSize}</h1>
        <input type="radio" className="btn-check" name="options" id="option1" autocomplete="off" value="S" onChange={e=>setSelectedSize(e.target.value)} />
        <label className="btn btn-primary" htmlFor="option1">S</label>

        <input type="radio" className="btn-check" name="options" id="option2" autocomplete="off" value="M" onChange={e=>setSelectedSize(e.target.value)} />
        <label className="btn btn-primary ms-2" htmlFor="option2">M</label>

        <input type="radio" className="btn-check" name="options" id="option3" autocomplete="off" value="L"  onChange={e=>setSelectedSize(e.target.value)}/>
        <label className="btn btn-primary ms-2" htmlFor="option3">L</label>

        <input type="radio" className="btn-check" name="options" id="option4" autocomplete="off" value="XL" onChange={e=>setSelectedSize(e.target.value)} />
        <label className="btn btn-primary ms-2" htmlFor="option4">XL</label>
    </>
  )
}

export default SizeShirt

在其他组件中获取尺码值 #

import { useSize } from "./SizeContext";

const OtherComponent = () => {
  const { selectedSize } = useSize();

  return (
    <div>
      <p>选中的尺码：{selectedSize}</p>
    </div>
  );
};

export default OtherComponent;

3. 状态管理库（大型应用场景） #

如果是大型项目，状态需要在多个组件间共享，推荐使用轻量的状态管理库比如Zustand，或者Redux Toolkit。

示例：使用Zustand #

安装Zustand：

npm install zustand

创建store：

import { create } from 'zustand'

const useSizeStore = create((set) => ({
  selectedSize: undefined,
  setSelectedSize: (size) => set({ selectedSize: size }),
}))

在SizeShirt组件中使用：

import "./SizeShirt.css"
import React from "react"
import useSizeStore from "./sizeStore";

const SizeShirt = () => {
  const setSelectedSize = useSizeStore(state => state.setSelectedSize);
  const selectedSize = useSizeStore(state => state.selectedSize);

  return (
    <>
        <h1>{selectedSize}</h1>
        <input type="radio" className="btn-check" name="options" id="option1" autocomplete="off" value="S" onChange={e=>setSelectedSize(e.target.value)} />
        <label className="btn btn-primary" htmlFor="option1">S</label>

        {/* 其余单选按钮代码同上 */}
    </>
  )
}

export default SizeShirt

在其他组件中获取：

import useSizeStore from "./sizeStore";

const OtherComponent = () => {
  const selectedSize = useSizeStore(state => state.selectedSize);

  return <p>选中尺码：{selectedSize}</p>;
};

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