React JS中如何在兄弟组件之间传递props值

这个需求完全可以实现，针对你的场景用状态提升方案就能低成本搞定，核心逻辑是把两个兄弟组件共享的选中类目状态放到公共父组件中管理，父组件负责把状态更新方法传给触发修改的子组件，把状态值传给需要响应变化的子组件。

1. 修改父组件BuyerCategoryPage代码 #

在父组件中添加状态管理选中的类目，再通过props分别传递给两个子组件：

import { useState } from 'react'
import CategorySlider from './CategorySlider'
import CategoryProducts from './CategoryProducts'

function BuyerCategoryPage(props) {
    // 定义共享状态：当前选中的类目名
    const [selectedCat, setSelectedCat] = useState('')
    return (
        <div>
                {/* 给第一个子组件传修改状态的方法 */}
                <CategorySlider onCatChange={setSelectedCat} />
                {/* 给第二个子组件传当前选中的类目值 */}
                <CategoryProducts selectedCat={selectedCat}/>
        </div>
    )
}
export default BuyerCategoryPage

2. 修改第一个兄弟组件CategorySlider代码 #

接收父组件传的更新方法，点击类目时调用该方法把选中值传给父组件：

// 组件接收props参数
export default function CategorySlider(props) {
  const HandleChangeProductCat = (value) => {
      console.log(value);
      // 调用父组件传的更新方法，把选中值传上去
      props.onCatChange(value)
  }

  // 这里保留你原来的Slider渲染逻辑即可，不用改
  return (
      <div>
          <Container fluid>
              <Slider style={{paddingTop:20, margin: '0 auto'}} {...settings}>
                  {
                      SlideData.map((data) => {
                          return (
                              <div key={data.id} >
                                  <div className="sliderDataCategory">
                                      <h6>
                                          <Container>
                                              <Row>
                                                  <Col md={3}>
                                                      <img className="img-fluid" src={data.cat_image}  /> 
                                                  </Col>
                                                  <Col >
                                                      <label onClick={() => HandleChangeProductCat(data.cat_title)}>{data.cat_title}</label>
                                                  </Col>
                                              </Row>
                                          </Container>
                                      </h6>
                                  </div>
                              </div>
                          )
                      })
                  }
              </Slider>
          </Container>
      </div>
  )
}

3. 修改第二个兄弟组件CategoryProducts代码 #

接收父组件传的选中类目值，根据该值更新展示的产品即可：

import { useEffect, useState } from 'react'

function CategoryProducts(props) {
  // 拿到父组件传的当前选中类目
  const { selectedCat } = props
  const [productList, setProductList] = useState([])

  // 监听选中类目变化，请求对应类目的产品数据
  useEffect(() => {
    if(!selectedCat) return
    // 这里替换为你实际的产品请求逻辑，比如调用接口拿对应类目的产品
    const fetchProducts = async () => {
      const res = await fetch(`/api/products?cat=${encodeURIComponent(selectedCat)}`)
      const data = await res.json()
      setProductList(data)
    }
    fetchProducts()
  }, [selectedCat])

  // 渲染productList即可
  return (
    <div>
      {productList.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  )
}
export default CategoryProducts

补充说明 #

如果后续你的项目组件层级变深，多层传props麻烦的话，可以再考虑用React Context、Redux、Zustand等方案解决跨组件传值问题，你当前的场景用状态提升就足够，不需要引入额外依赖增加复杂度。

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