Question

您好，我是reactJs的新手，这可能是一个非常基本的问题，但是我坚持这一点，任何人都可以为此提供解决方案。

我需要将ID从Ownerlist.js传递给Ownerinformation.js，截至目前，我将编码硬编码为4，但是我需要它动态发送。

List View Component - OwnersList.js List Item Detail - Ownerinformation.js

1）OwnerList.js

import React, { Component } from "react";
import axios from 'axios';
import { Grid,Row,Col,Table,Glyphicon } from "react-bootstrap";
import { Form, Button, Message } from "semantic-ui-react";
import './ownerinformation.css';
class OwnersList extends Component {   

    state = {  
        owners: []
    };  

    componentDidMount(){  

        fetch('http://localhost:9090/api/owners')      
        .then(response => response.json())
        .then(data => this.setState({ owners:data }));
     }
     //editowner = (data) => this.props.editowner(data).then(() => this.props.history.push('/dashboard'));
     ownerinformation = (props) => {        
        this.props.history.push('/ownerinformation');
     }  

   downloadpdf = (props) => {        
    window.open('http://localhost:9090/api/owners/download/pdf?lastname=%%')
     }

    render(){

        return(
        <div>  
            <Grid>
            <Row className="downloadpdf">
                <Col sm={6}>Page 1/3 - found 22 Owners</Col>
                <Col  onClick={() => this.downloadpdf()} sm={6}><Glyphicon glyph="download" />Download As PDF</Col>
            </Row> 
      </Grid>            
            <Table striped bordered condensed hover>
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>City</th>
      <th>Telephone</th>
      <th>Email</th>
      <th>Owner Info</th>
    </tr>
  </thead>
  <tbody>     

                  {this.state.owners.map(owner =><tr><td>{owner.firstname}</td><td>{owner.address}</td><td>{owner.city}</td><td>{owner.telephone}</td><td>{owner.email}</td><td value={owner.id} onClick={() => this.ownerinformation(owner.id)}><Button primary>User Information</Button>  </td></tr>)}

    </tbody>
  </Table>;



        </div>
    )}

}

export default  OwnersList;

Blockquote

2）OwnerInformation.js

import React, { Component } from "react";
import axios from 'axios';
import { Grid , Row , Table , Col , Clearfix  } from "react-bootstrap";
import './ownerinformation.css';
import { Form, Button, Message } from "semantic-ui-react";
class OwnerInformation extends Component {   

    state = {          
        owners: [],
        ownerInfo:{},
        petBasedOnOwner:{}
    };  

    componentDidMount(){ 

        fetch('http://localhost:9090/api/owners')      
        .then(response => response.json())
        .then(data => this.setState({ owners:data }));

        fetch('http://localhost:9090/api/owners/4')      
        .then(response => response.json())
        .then(data => this.setState({ ownerInfo:data }));

     }
     editowner = (props) => {        
        this.props.history.push('/editowner');
     }  

 render(){

        return(
        <div>             
            <Grid>
  <Row>
    <Col sm={6}>
    <h2> Owner Information</h2> 
    <ul className="owner-info-ul">   
               <li className="owner-info"><span className="labelinfo">Name:</span>{this.state.ownerInfo.firstname}</li>
               <li className="owner-info"><span className="labelinfo">Address:</span>{this.state.ownerInfo.address}</li>
               <li className="owner-info"><span className="labelinfo">City:</span>{this.state.ownerInfo.city}</li>
               <li className="owner-info"><span className="labelinfo">Telephone:</span>{this.state.ownerInfo.telephone}</li>
               <li className="owner-info"><span className="labelinfo">Email:</span>{this.state.ownerInfo.email}</li>
            </ul>
            <Button primary onClick={() => this.editowner(1)}>Edit User</Button>   
    </Col>
    <Col sm={6}>
    <h2> Pets and Visits</h2> 
    {this.state.owners.map(owner => {
               owner.pets.filter(item => {if (item.owner_id === 1)                   
                   <ul>
                       <li className="petslist">PetName: {item.name}</li>
                       <li className="petslist">Date Of Birth: {item.birthdate}</li>
                       <li className="petslist">Type: {item.type_id}</li>
                   </ul>
               })

            })}

                   <br></br>

    </Col>
  </Row> 
            </Grid>




        </div>
    )}

}

export default  OwnerInformation;

Answer 1

map（）方法has a few parameters，但我们在这里关心的是当前项和索引。

您可以执行以下操作以将索引传递给子组件：

{this.state.owners.map((owner, index) => <OwnerInformation index={index} />)}

Answer 2

您可以尝试通过

传递数据

OwnerList.js

let modularLarge = CLKComplicationTemplateModularLargeStandardBody()
modularLarge.headerTextProvider = CLKSimpleTextProvider(text: dateText.capitalized)
modularLarge.headerTextProvider.tintColor = self.tintColor

modularLarge.body1TextProvider = CLKSimpleTextProvider(text: timeText)
modularLarge.body2TextProvider = CLKSimpleTextProvider(text: "00:00")

modularLarge.body1TextProvider.tintColor = self.whiteColor
modularLarge.body2TextProvider?.tintColor = self.whiteColor

handler(CLKComplicationTimelineEntry(date: Date(),complicationTemplate: modularLarge))

OwnerInformation.js

this.props.history.push({
  pathname: '/ownerInformation',
  search: '?query=ownerInformation',
  state: { data: id }
})

ReactJs-如何将特定项目ID从一个组件传递到另一组件

2 个答案: