如何從ReactJS中的其他兄弟組件傳遞props值

我有關于將點擊值發送到第一個兄弟組件的問題，我會將道具值發送給第二個兄弟組件，這可能嗎？

我有一個模塊，當我單擊第一個兄弟姐妹的類別專案時，第二個兄弟姐妹上的產品將根據我單擊第一個兄弟姐妹的類別名稱發生變化。

這是我的父組件：

 function BuyerCategoryPage(props) {
    

    return (
        <div>
               
                <CategorySlider />



                <CategoryProducts/>
          

        </div>
    )
}

export default BuyerCategoryPage

第一兄弟類別Slider.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) {
}

uj5u.com熱心網友回復：

最簡單的方法是將狀態提升到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
}

分類產品

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

uj5u.com熱心網友回復：

例如：

function Example() {
    const [value, setValue] = useState("");

    const onClick = (someValue) => {
        setValue(someValue);
    }

    return (
        <div>
            <First onClick={onClick} />
            <Second value={value} />
        </div>
    )
}

function First(props) {
    const onClick = () => {
        props.onClick((new Date()).toString());
    }
    return (
        <input type="button" onClick={onClick} value="Click me" />
    )
}

function Second(props) {
    return (
        <div>{props.value}</div>
    )
}

標籤：javascript 反应

上一篇：在渲染之前重新排列物件上的CakePHPJSON回應

下一篇：為什么我的javascript代碼沒有按預期作業