Question

我是 React 的新手，我正在尝试制作一个简单的应用程序...我从后端获取一些数据（带有公告的列表），并与它们一起制作一个列表。所以，我希望当我按下那个公告的按钮时，我想去另一个组件，在那里我可以看到有关该公告的详细信息。我把我的代码：

    class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            carData: null,
            checkData: false
        }
    }

    getData = () => {
        fetch('http://localhost:8000/api/all-articles')
        .then( (response) => response.json() )
        .then( (response) => {this.setState({
            carData : response,
            checkData : true
        })});
    }

    componentDidMount = () => {
        this.getData();
    }

    displayCars = () => {
        return(
            this.state.carData.data.map( (object, index) => (
                <CarCard key={index} name = {object.title} description={object.description} img={object.image} id={object.id}/>
            ) )
        );
    }

    render() {
        if(this.state.checkData){
            return(
                <div className="App">
                    <Title/>
                    <div className="cars">
                    {this.displayCars()}
                    </div>
                </div>
            );
        }else {
            return(
                <div>Loading..</div>
            );
        }
    }
}

export default App;


    class CarCard extends React.Component {


    render() {
        console.log(this.goToCardInfo(this.props.id));
        return(
            <div className="card">
                <Card>
                    <Card.Img variant="top" src={`http://localhost:8000/images/${this.props.img}`}/>
                    <Card.Body>
                        <Card.Title>{this.props.name}</Card.Title>
                        <Card.Text>
                        {this.props.description}
                        </Card.Text>
                        <Button variant="primary">See announce</Button>
                    </Card.Body>
                </Card>
            </div>
        );
    }
}

export default CarCard;


    class InfoCard extends React.Component {
    
    render() {
        return(
            <h2>hello</h2>
        );
    }
}

export default InfoCard;

我想说的是，我从后端获取了 id、标题、描述、价格……我用谷歌搜索了它，但我不明白我该怎么做……谢谢

Answer 1

我认为你需要react-router-dom
我建议你学习它。下面是我使用路由器的实现。

App.js

sed i '1~4 s/$/\\1/g' seq/*_1.fq

Cars.js

import {BrowserRouter as Router, Switch, Route} from "react-router-dom"
import Cars from "./Cars.js" // Change it to the correct path
import InfoCard from "./InforCard.js"

class App extends React.Component {
   render() {
       <Router>
          <Switch>
             <Route path="/cars" component={Cars}></Route>
              <Route path="/cars/:id" component={InfoCard} exact></Router>
          <Switch>
       </Router>
   }
}
export default App;

CarCard.js

 class Cars extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            carData: null,
            checkData: false
        }
    }

    getData = () => {
        fetch('http://localhost:8000/api/all-articles')
        .then( (response) => response.json() )
        .then( (response) => {this.setState({
            carData : response,
            checkData : true
        })});
    }

    componentDidMount = () => {
        this.getData();
    }

    displayCars = () => {
        return(
            this.state.carData.data.map( (object, index) => (
                <CarCard key={index} name = {object.title} description={object.description} img={object.image} id={object.id}/>
            ) )
        );
    }

    render() {
        if(this.state.checkData){
            return(
                <div>
                    <Title/>
                    <div className="cars">
                    {this.displayCars()}
                    </div>
                </div>
            );
        }else {
            return(
                <div>Loading..</div>
            );
        }
    }
}

export default Cars;

InfoCard.js

import { withRouter } from "react-router-dom"

class CarCard extends React.Component {
   render() {
        console.log(this.goToCardInfo(this.props.id));
        return(
            <div className="card">
                <Card>
                    <Card.Img variant="top" src = {`http://localhost:8000/images/${this.props.img}`}/>
                    <Card.Body>
                        <Card.Title>{this.props.name}</Card.Title>
                        <Card.Text>
                        {this.props.description}
                        </Card.Text>
                        <Button variant="primary" 
                                onClick={() => this.props.history.push("/card/" + this.props.id)}>See announce</Button>
                    </Card.Body>
                </Card>
            </div>
        );
    }
}

export default withRouter(CarCard);

单击卡片，然后导航到包含详细信息的卡片页面，作为反应

1 个答案: