Tengo una pregunta sobre el envío del valor del clic a los primeros componentes hermanos y enviaré el valor de los accesorios a los segundos hermanos, ¿es eso posible?
Tengo un módulo en el que, cuando hago clic en los elementos de categoría de los primeros hermanos, los productos del segundo hermano cambiarán según el nombre de categoría en el que hago clic en el primer hermano.
Aquí están mis componentes principales:
function BuyerCategoryPage(props) { return ( <div> <CategorySlider /> <CategoryProducts/> </div> ) } export default BuyerCategoryPagePrimer hermano 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> )Segundo hermano CategoryProducts.js
function CategoryProducts(props) { }Lo más simple sería elevar el estado al componente BuyerCategoryPage y pasar un controlador "onChange" a CategorySlider y el valor de estado a 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> ); }Control deslizante de categoría
const handleChangeProductCat = (value) => { console.log(value); props.onChange(value); // invoke callback and pass new value }CategoríaProductos
function CategoryProducts({ value }) { // access the passed value // use the `value` prop as necessary }Por ejemplo:
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> ) }