javascript 如何在nextjs中从其他文件加载引导组件

我是NextJS的新手，我陷入了点击一个按钮后需要链接到另一个页面的情况，我有一个想法，在onClick事件中调用一个函数，该函数来自另一个返回引导组件的文件，但当我点击按钮时，什么也没发生，但console.log的结果出现在devtool中，这意味着该函数被成功调用，但可能不会返回任何东西。
这是我的代码

index.tsx

import Card from 'react-bootstrap/Card';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Button from 'react-bootstrap/Button';
import Hotel from '../../src/api/booking/booking';
import { useEffect, useState } from 'react';
import Container from 'react-bootstrap/Container';
import ListGroup from 'react-bootstrap/ListGroup';
import Form from 'react-bootstrap/Form';
import Link from 'next/link';
import HotelDetails from './hotelDetails';
import { useRouter } from 'next/router'

function Booking() {

    const [hotel, setHotel] = useState<any[]>([])
    const [facility, setFacility] = useState<any[]>([])
    const [refresh, setRefresh] = useState<any>(false)
    const [id, setId] = useState()
    const router = useRouter()

    useEffect(() => {
        Hotel.GetDataHotel().then
            (data => {
                setHotel(data)
            })
    }, [refresh])

    useEffect(() => {
        Hotel.GetFacilitiesHotel(1).then
            (data => {
                setFacility(data)
            })
    })

    // console.log(hotel)
    // Array.from(facility).map((_, faciItem) => (
    //     ((facility[faciItem]['faciHotel']['hotelId'])==1 ? console.log(facility[faciItem]['faciName']) : '')
    // ))
    
  return (
    <Container>
        <Row>
            <Col xs lg="2" className='mt-5'>
                <Card>
                    <Card.Header>Filter</Card.Header>
                    <Form>
                        <Form.Group className="mb-3 mt-2" controlId="minimumPrice">
                            <Col className='mx-2'>
                                <Form.Label>Minimum Price</Form.Label>
                                <Form.Control type="text" placeholder="Minimum" />
                            </Col>
                        </Form.Group>
                        <hr></hr>
                        <Form.Group className="mb-3 mt-0" controlId="maximumPrice">
                            <Col className='mx-2'>
                                <Form.Label>Maximum Price</Form.Label>
                                <Form.Control type="text" placeholder="Maximum" />
                            </Col>
                        </Form.Group>
                        <hr></hr>
                        <Col className='mx-2'>
                            <p className='mx-1 mb-2' muted>
                                Hotel Facilities
                            </p>
                            <Form.Group className="mb-3" controlId="parkingCheckbox">
                                <Form.Check type="checkbox" label="Parking Facility" />
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="securityCheckbox">
                                <Form.Check type="checkbox" label="Security" />
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="restaurantCheckbox">
                                <Form.Check type="checkbox" label="Restaurant" />
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="laundryCheckbox">
                                <Form.Check type="checkbox" label="Laundry" />
                            </Form.Group>
                        </Col>
                        <hr></hr>
                        <Button variant="primary" type="submit" className='mb-2 ml-2'>
                            Apply
                        </Button>
                    </Form>
                </Card>
            </Col>
            <Col>   
                <Row xs={1} md={2} className="my-5 mx-2">
                {Array.from(hotel).map((_, hotelItem) => (
                    <Col key={hotelItem}>
                    <Card className='mb-4'>
                        <Card.Img className='mt-2' style={{ maxWidth: 400, maxHeight: 400, margin: 'auto' }} variant="top" src="https://www.wartadepok.com/wp-content/uploads/2021/01/E3D1FA7E-88CB-484A-8811-B8E2900257E4.jpeg" />
                        <Card.Body>
                        <Card.Title>{hotel[hotelItem]['hotelName']} ({hotel[hotelItem]['hotelRatingStar']}&#9733;)</Card.Title>
                        <Card.Text>
                            {hotel[hotelItem]['hotelAddr']['addrLine1']}
                        </Card.Text>
                        <Card.Text>
                            {hotel[hotelItem]['hotelDescription']}
                        </Card.Text>
                        <Card.Text>
                            Facilities : {Array.from(facility).map((_, faciItem) => (
                                ((facility[faciItem]['faciHotel']['hotelId'])==(hotel[hotelItem]['hotelId']) ? facility[faciItem]['faciName'] : '')
                            )).join(', ')}
                        </Card.Text>
                        <Card.Text>
                            Contact : {hotel[hotelItem]['hotelPhonenumber']}
                        </Card.Text>
                        <Button onClick={()=>HotelDetails(hotel[hotelItem]['hotelId'])} variant="info">View Details</Button>
                        {' '}
                        <Button variant="primary">Book Now</Button>{' '}
                        </Card.Body>
                    </Card>
                    </Col>
                ))}
                </Row>
            </Col>
        </Row>
    </Container>
  );
}

export default Booking;

hotelDetails.tsx

import Card from 'react-bootstrap/Card';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Button from 'react-bootstrap/Button';
import Hotel from '../../src/api/booking/booking';
import { useEffect, useState } from 'react';
import Container from 'react-bootstrap/Container';
import ListGroup from 'react-bootstrap/ListGroup';
import Form from 'react-bootstrap/Form';
import Layout from '@/src/components/layout';

export default function HotelDetails(id){
    console.log(id)
    return(
        <Layout>   
            <Container>
                <p>Hello, World!</p>
            </Container>
        </Layout>
    );
}

任何帮助将不胜感激。

HotelDetails是一个React组件，所以它不能像Javascript函数那样被调用，它必须作为JSX呈现给DOM。我猜你有HotelDetails作为你想要导航和查看的特定页面。按钮的onClick处理程序应该向呈现HotelDetails组件的URL路径发出导航操作。id值可能是动态路径段。
示例：

...
import { useRouter } from 'next/router';

function Booking() {
  ...

  const router = useRouter();

  ...
    
  return (
    <Container>
      <Row>
        ...
        <Col>   
          <Row xs={1} md={2} className="my-5 mx-2">
            {hotel.map((hotelItem, index) => (
              <Col key={index}>
                <Card className='mb-4'>
                  ...
                  <Card.Body>
                    ...
                    <Button
                      onClick={() => {
                        router.push(`/hotel-details/${hotelItem.hotelId}`); // *
                      }}
                      variant="info"
                    >
                      View Details
                    </Button>
                    {' '}
                    <Button variant="primary">Book Now</Button>{' '}
                  </Card.Body>
                </Card>
              </Col>
            ))}
          </Row>
        </Col>
      </Row>
    </Container>
  );
}

export default Booking;

假设HotelDetails在动态路径pages/hotel-details/[hotelId].js * 上渲染，则可以通过渲染组件中的router.query.hotelId访问hotelId路径段塞。

...
import { useRouter } from 'next/router'

export default function HotelDetails() {
  const router = useRouter();
  const { hotelId } = router.query;
  
  useEffect(() => {
    console.log(hotelId);
  }, [hotelId]);

  return (
    <Layout>   
      <Container>
        ...
      </Container>
    </Layout>
  );
}

****注意：**显然，您需要调整用于匹配应用的页面结构/组织的路径。我在这里选择的道路只是一个例子。

javascript 如何在nextjs中从其他文件加载引导组件

1条答案

相关问题

热门标签

最新问答