React - 在两个组件之间共享 props

发布于 2025-01-14 11:59:17 字数 3427 浏览 2 评论 0原文

我有一个布局组件，它调用内部的不同组件。它们是标题、面包屑、主要和过滤器（左侧边栏）和页脚

我有一个“过滤器”组件，当在“选择”上进行选择时，我希望它将这些信息发送到“类别”组件。

也就是说，如果在组件“过滤器”中我按品牌“FORD”过滤，我希望组件“类别”接收品牌“FORD”

这样的代码可以工作，但我无法将 Filterheader 组件的属性传递给名称组件（类别名称的别名）

布局

import NavigationGuest from '@/components/Layouts/NavigationGuest'
import Footer from '@/components/Layouts/FooterGuest'
import { useRouter } from 'next/router'
import FilterHeader from "@/components/filters/Header";

const GuestLayout = ({ children }) => {
    const router = useRouter()

    return (
        <div className="min-h-screen bg-gray-100">

            <NavigationGuest />


            <FilterHeaderNeveras />

            {/* Page Content */}
            <main>{children}</main>

            <Footer />
        </div>
    )
}

export default GuestLayout

FilterHeader

import TextField from '@mui/material/TextField'
import Autocomplete from '@mui/material/Autocomplete'
import { useRouter } from 'next/router'
import { useState, useEffect } from 'react'
import axios from 'axios'
import Button from '@mui/material/Button'

const FilterHeaders = () => {
    useRouter()

    const [jsonResultBrands, setJsonResultBrands] = useState([])

    const [selectMarca, setSelectMarca] = useState([])

    const handleChangeBrand = (event, value) => {
        setSelectMarca(value)
    }

    const handleButtonCLick = (event, value) => {
        console.log(selectMarca)
    }

    useEffect(() => {
        fetch(
            'http://localhost:8000/api/productcategoryproperties/3/category/marca/type',
        )
            .then(response2 => response2.json())
            .then(json2 => setJsonResultBrands(json2))
    }, [])

    return (
        <div style={{ padding: '10px' }}>
            <Autocomplete
                onChange={handleChangeBrand }
                disablePortal
                id="combo-box-demo1"
                key={jsonResultCalifEnergetica.id}
                options={jsonResultBrands}
                sx={{ width: '100%' }}
                getOptionLabel={jsonResults => `${jsonResults.name}`}
                renderInput={params => <TextField {...params} label="Brand" />}
            />

 

            <Button variant="outlined" onClick={handleButtonCLick}>
                Buscar
            </Button>
        </div>
    )
}

export default FilterHeaders

类别名称

import Head from 'next/head'
import axios from 'axios'
import GuestLayout from '@/components/Layouts/GuestLayout'
import { useRouter } from 'next/router'
import Grid from '@mui/material/Grid'
import FilterHeaders from '@/components/filters/Header'


const Name = ({ itemsList }) => {
    const router = useRouter()

    return (
        <GuestLayout>
            <Head>
                <title>Product Category {router.query.name}</title>
            </Head>

            <div className="py-12">
                Filters: <br />
                <FilterHeader />
            </div>
        </GuestLayout>
    )
}

Name.getInitialProps = async () => {

    const { data } = await axios.get('http://localhost:8080/api/category/1')

    return { itemsList: data }
}

export default Name

原文

I have a layout component that calls different components inside.
They are the header, breadcumbs , main and filter (sidebar left) and footer

I have a "filters" component that when selecting on the "select" I want it to send this information to the "categories" component.

That is, if in the component "filters" I filter by brand "FORD" I want the component "categories" to receive the brand "FORD"

The code like this works, but I can't pass the properties of the Filterheader component to the Name component (alias of category name)

Layout

import NavigationGuest from '@/components/Layouts/NavigationGuest'
import Footer from '@/components/Layouts/FooterGuest'
import { useRouter } from 'next/router'
import FilterHeader from "@/components/filters/Header";

const GuestLayout = ({ children }) => {
    const router = useRouter()

    return (
        <div className="min-h-screen bg-gray-100">

            <NavigationGuest />


            <FilterHeaderNeveras />

            {/* Page Content */}
            <main>{children}</main>

            <Footer />
        </div>
    )
}

export default GuestLayout

FilterHeader

import TextField from '@mui/material/TextField'
import Autocomplete from '@mui/material/Autocomplete'
import { useRouter } from 'next/router'
import { useState, useEffect } from 'react'
import axios from 'axios'
import Button from '@mui/material/Button'

const FilterHeaders = () => {
    useRouter()

    const [jsonResultBrands, setJsonResultBrands] = useState([])

    const [selectMarca, setSelectMarca] = useState([])

    const handleChangeBrand = (event, value) => {
        setSelectMarca(value)
    }

    const handleButtonCLick = (event, value) => {
        console.log(selectMarca)
    }

    useEffect(() => {
        fetch(
            'http://localhost:8000/api/productcategoryproperties/3/category/marca/type',
        )
            .then(response2 => response2.json())
            .then(json2 => setJsonResultBrands(json2))
    }, [])

    return (
        <div style={{ padding: '10px' }}>
            <Autocomplete
                onChange={handleChangeBrand }
                disablePortal
                id="combo-box-demo1"
                key={jsonResultCalifEnergetica.id}
                options={jsonResultBrands}
                sx={{ width: '100%' }}
                getOptionLabel={jsonResults => `${jsonResults.name}`}
                renderInput={params => <TextField {...params} label="Brand" />}
            />

 

            <Button variant="outlined" onClick={handleButtonCLick}>
                Buscar
            </Button>
        </div>
    )
}

export default FilterHeaders

Category Name

import Head from 'next/head'
import axios from 'axios'
import GuestLayout from '@/components/Layouts/GuestLayout'
import { useRouter } from 'next/router'
import Grid from '@mui/material/Grid'
import FilterHeaders from '@/components/filters/Header'


const Name = ({ itemsList }) => {
    const router = useRouter()

    return (
        <GuestLayout>
            <Head>
                <title>Product Category {router.query.name}</title>
            </Head>

            <div className="py-12">
                Filters: <br />
                <FilterHeader />
            </div>
        </GuestLayout>
    )
}

Name.getInitialProps = async () => {

    const { data } = await axios.get('http://localhost:8080/api/category/1')

    return { itemsList: data }
}

export default Name

分享到QQ

分享到微博