Я хочу отправить сопоставленное предложение в дочерний компонент - PullRequest
Новая
       9

Я хочу отправить сопоставленное предложение в дочерний компонент

0 голосов
/ 21 апреля 2020

ребята, мне нужна помощь. У меня есть компонент home.jsx, в котором отображаются некоторые предложения, и я хочу, чтобы, когда пользователь нажимает кнопку «Получить предложение», он перенаправляется на страницу предложений, чтобы он мог подробно просмотреть предложение, для которого я должен отправить of.offerid. чтобы предложить компонент, но я не знаю, как это сделать. Приветствуется любая помощь. Спасибо

home.jsx 

export default class Home extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        offers : [],
        isLoaded : false,
        redirect : false,
    }


}
componentDidMount(){
    getList().then(data => {
        this.setState(
            {
               isLoaded : true,
                offers: [...data]
            },
            () => {
                console.log(this.state.offers)
            }
        )
    });
}
onClick = () => {
  this.setState({
    redirect:true,

});
}

            <Tabs />
        <div className="container">

            <Carousel >
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src={banner}
                        alt=""
                    />
                    <Carousel.Caption>
                        <h3>First slide label</h3>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src={banner}
                        alt=""
                    />

                    <Carousel.Caption>
                        <h3>Second slide label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src={banner}
                        alt=""
                    />

                    <Carousel.Caption>
                        <h3>Third slide label</h3>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
            <br/>
            <h1>OFFERS</h1>
            <div className="container-fluid">

                    <CardDeck className="row text-center">

                        {this.state.offers.map(of => (

                            <Card key={of.offerid} className=" card h-100" onClick={this.onClick}>
                        <Card.Img variant="top" src={banner} />
                    <Card.Body>
                                    <Card.Title className="text-capitalize" value={of.offerid}>{of.offertitle}</Card.Title>
                        <Card.Text>
                            {of.offerdescription}
                        </Card.Text>
                    </Card.Body>

                    <Card.Footer> 
                                    <Button variant="primary">GET OFFER</Button>
                                </Card.Footer>

                </Card>
                        ))}
                    </CardDeck>

                </div>



        </div>

        </div>

    );
    }
}
}

Я хочу отправить of.offerid, т.е. в функции карты в доме .jsx to vendoffer.jsx

vendoffer.jsx 

export default class Availoffer extends React.Component {
constructor(props) {
    super(props)
    this.state = {

    }
}

componentDidMount(){
    let data = sessionStorage.getItem('user')
    console.log(data)
}

render() {
    return (
        <div>
            <Navigation/>
            <Tabs/> 

            <Container className="grid-container">
            <div className="box-1">
                <Image className="banner" src={banner} fluid /> 
           <h6>All Stock</h6>
           <br></br>
                <Rbtn tton variant="primary" size="lg">
                    GET CODE AND OPEN WEBSITE
                </Rbtn>
           <br/>
           <br />
                </div>
                <div>
                    <br/><br/>
                    <h2>About this Student Discount</h2>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    <Accordion>
                        <Card>
                            <Card.Header>
                                <Accordion.Toggle className="a-btn" as={Link} variant="link" eventKey="0">
                                See Terms and Condition
  </Accordion.Toggle>
                            </Card.Header>
                            <Accordion.Collapse eventKey="0">
                                <Card.Body>Hello! I'm the body</Card.Body>
                            </Accordion.Collapse>
                        </Card>
                      </Accordion>
                      <br/>

                </div>


            </Container>
            <br/>
            <h1>Related Offers</h1>
            <br/>
            <CardDeck className="container" id="r-offers">
            <Card style={{ width: '18rem' }}>
                <Card.Img variant="top" src={banner} />
                <Card.Body>
                    <Card.Title>Card Title</Card.Title>
                    <Rbtn variant="primary">Go somewhere</Rbtn>
                </Card.Body>
            </Card>

            <Card style={{ width: '18rem' }}>
                <Card.Img variant="top" src={banner} />
                <Card.Body>
                    <Card.Title>Card Title</Card.Title>
                    <Rbtn variant="primary">Go somewhere</Rbtn>
                </Card.Body>
            </Card>
                <Card style={{ width: '18rem' }}>
                    <Card.Img variant="top" src={banner} />
                    <Card.Body>
                        <Card.Title>Card Title</Card.Title>
                        <Rbtn className="af-btn" variant="primary">Go somewhere</Rbtn>
                    </Card.Body>
                </Card>

            </CardDeck>

        </div>

    )
}
}

1 Ответ

0 голосов
/ 21 апреля 2020

Вы должны вернуть карту данных из штата задница arra 

 return (this.state.data.map((game, i) => {
                    return <Childcomponent data={data}} />;
                  }))

Ваш дочерний компонент: 

   ChildComponent = (props) => { 
    //some code

    return (
    <a href={props.data.redirectUrl}>
    /// your content from component
    </a>
    )
    }

В вашем дочернем компоненте вы можете получить данные как props.data

...