时间戳

首页 > 解决方案 > 如何从 React JS 中的其他兄弟组件传递 props 值

javascript - 如何从 React JS 中的其他兄弟组件传递 props 值

问题描述

我对向第一个兄弟组件发送点击值有疑问，我会将道具值发送给第二个兄弟组件，这可能吗？

我有一个模块，当我单击第一个兄弟姐妹的类别项目时，第二个兄弟姐妹上的产品将根据我单击第一个兄弟姐妹的类别名称而改变。

这是我的父组件：

 function BuyerCategoryPage(props) {
    

    return (
        <div>
               
                <CategorySlider />



                <CategoryProducts/>
          

        </div>
    )
}

export default BuyerCategoryPage

第一个兄弟 CategorySlider.js：

const HandleChangeProductCat = (value) => {
    console.log(value);
    // send the value to the second sibling
}

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>
)

第二个兄弟类别Products.js

function CategoryProducts(props) {
}

标签： javascriptreactjs

解决方案

最简单的方法是将状态提升到BuyerCategoryPage组件中并将“onChange”处理程序传递给CategorySlider并将状态值传递给CategoryProducts

function BuyerCategoryPage(props) {
  const [state, setState] = React.useState(); // common state

  return (
    <div>      
      <CategorySlider onChange={setState} /> // pass updater function
      <CategoryProducts value={state} /> // pass state value
    </div>
  );
}

类别滑块

const handleChangeProductCat = (value) => {
  console.log(value);
  props.onChange(value); // invoke callback and pass new value
}

分类Products

function CategoryProducts({ value }) { // access the passed value
  // use the `value` prop as necessary 
}

推荐阅读