Блог

Главная - Вопросы по программированию - Как передать значение props из других родственных компонентов в React JS

Как передать значение props из других родственных компонентов в React JS

#javascript #reactjs

Вопрос:

У меня есть вопрос относительно отправки значения щелчка первым родственным компонентам, и я отправлю значение реквизита вторым братьям и сестрам, возможно ли это?

У меня есть модуль, в котором, когда я нажимаю элементы категории на первые родственные элементы, продукты на втором родственном элементе будут меняться в зависимости от названия категории, которое я нажимаю на первом родственном элементе.

Вот мои родительские компоненты:

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

Второй брат CategoryProducts.js

 function CategoryProducts(props) {
}

Комментарии:

1. Какова взаимосвязь между «родственными» компонентами? Каково взаимодействие пользователей между ними? Переходит ли пользователь от первого компонента ко второму? Вы просто хотите обновить какое-то глобальное состояние с первого и заставить второе «увидеть» изменение? Вы можете поднять состояние до ближайшего общего предка и передать каждому реквизит, используя контекстный API React или глобальную библиотеку управления состоянием, такую как Redux.

2. @DrewReese вы правы, я просто хочу обновить некоторое глобальное состояние с первого, а второе увидеть изменения.

Ответ №1:

Самым простым было бы поднять состояние в 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>
  );
}

CategorySlider

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

CategoryProducts

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

Ответ №2:

Например:

 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>
    )
}
Метки: