首頁(yè) 猿問(wèn) 如何在不使用 Redux...

如何在不使用 Redux 的情況下在 React 中將變量值從子項(xiàng)發(fā)送到父項(xiàng)

JavaScript

慕斯709654 2023-01-06 11:12:33

我有一個(gè) Blog 組件，里面有一個(gè) Search 組件。我需要訪問(wèn)searchResults我的博客組件中的變量。如何將它從搜索組件傳遞到博客組件？這是父級(jí)（博客組件）：import React, { useState, useEffect } from 'react';import axios from 'axios';import Pagination from "react-pagination-js";import Spinner from '../Spinner/Spinner';import { Link } from 'react-router-dom';import Footer from '../Footer/Footer.jsx';import CustomHeader from '../CustomHeader/CustomHeader.jsx';import Search from '../Search/Search.jsx';const Blog = () => { let title = 'Articles' let [posts, setPosts] = useState([]); let [isMounted] = useState(false) let [currentPage, setCurrentPage] = useState(1); let [loading, setLoading] = useState(false); let [isVisible] = useState(true); const [postsPerPage] = useState(5); const GET_POSTS_API = process.env.REACT_APP_GET_POSTS_API; useEffect(() => { const fetchPosts = async () => { isMounted = true; setLoading(true); if (isMounted) { let res = await axios.get(GET_POSTS_API); setPosts(res.data); } setLoading(false); }; fetchPosts(); }, []); isMounted = false // Get current posts const indexOfLastPost = currentPage * postsPerPage; const indexOfFirstPost = indexOfLastPost - postsPerPage; const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost); let totalPagesGenerated = posts.length / postsPerPage; let totalPagesGeneratedCeiled = Math.ceil(totalPagesGenerated); if (loading) { return <Spinner /> } // Change page const paginate = (pageNumber) => { Math.ceil(totalPagesGenerated) if (pageNumber > 0 && pageNumber <= totalPagesGeneratedCeiled) { setCurrentPage(pageNumber); } }

查看完整描述

3 回答

回首憶惘然

TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超11個(gè)贊

我更喜歡兩種將變量傳遞給子組件的方法。它們?cè)诓煌那闆r下都有用

方法一：使用屬性 => Props

如果您的組件樹嵌套不深，則此方法很有用。例如，您希望將變量從父項(xiàng)傳遞給子項(xiàng)。

一個(gè)嵌套的組件如下

const ParentComponent = () => {

const [variable, setVariable] = useState(0);

return (

<ChildComponent variable={variable} setVariable={setVariable} /> //nested within ParentComponent, first level

)

}

const ChildComponent = (props) => {

return(

<>

<div>prop value is {props.variable}</div> //variable attribute available through component props

<button onClick={props.setVariable(prevValue => prevValue+1}>add +1</button> //set value in parent through callBack method

</>

)

}

如果你有一個(gè)高度嵌套的組件層次結(jié)構(gòu)，事情就會(huì)變得有點(diǎn)混亂。比方說(shuō)， ChildComponent 返回另一個(gè)組件，并且您希望variable將傳遞給該組件，但是 ChildComponent 不需要該變量，您最終會(huì)遇到這種情況

const ParentComponent = () => {

const [variable, setVariable] = useState(false);

return (

<ChildComponent someProp={variable}/> //nested within ParentComponent, first level

)

}

const ChildComponent = (props) => {

return(

<AnotherCustomComponent someProp={props.someProps}/> //someProp attribute available through component props

)

}

const AnotherCustomComponent = (props) => {

return(

<div>prop value is {props.someProp}</div> //someProp attribute available through component props

)

}

即使 ChildComponent 不需要該道具，它也需要通過(guò)道具將其推送到其子組件。這被稱為“螺旋槳鉆井”。這是一個(gè)簡(jiǎn)單的示例，但對(duì)于更復(fù)雜的系統(tǒng)，它可能會(huì)變得非常混亂。為此，我們使用...

方法二：Context API CodeSandbox

上下文 API 提供了一種向子組件提供狀態(tài)的巧妙方法，而不會(huì)以道具鉆井情況結(jié)束。它需要一個(gè)Provideris setup，它將它的值提供給它的任何Consumers'. Any component that is a child of the Provider 可以使用上下文。

首先創(chuàng)建一段上下文。

CustomContext.js

import React from 'react';

const CustomContext = React.createContext();

export function useCustomContext() {

return React.useContext(CustomContext);

}

export default CustomContext;

接下來(lái)是實(shí)現(xiàn)提供者，并給它一個(gè)值。我們可以使用之前的 ParentComponent 并添加 Context provider

import CustomContext from './CustomContext'

const ParentComponent = () => {

const [variable, setVariable] = useState(false);

const providerState = {

variable,

setVariable

}

return (

<CustomContext.Provider value={providerState} >

</CustomContext.Provider>

)

}

現(xiàn)在任何嵌套在 <CustomContext.Provider></CustomContext.Provider> 中的組件都可以訪問(wèn)傳遞到Provider

我們嵌套的子組件看起來(lái)像這樣

const ChildComponent = (props) => {

return(

<AnotherCustomComponent/> //Notice we arent passing the prop here anymore

)

}

const AnotherCustomComponent = (props) => {

const {variable, setVariable} = useCustomContext(); //This will get the value of the "value" prop we gave to the provider at the parent level

return(

<div>prop value is {variable}</div> //variable pulled from Context

)

}

如果 ParentComponent 被使用兩次，則 ParentComponent 的每個(gè)實(shí)例都將有自己的“CustomContext”可供其子組件使用。

const App() {

return (

<>

</>

}

反對(duì) 回復(fù) 2023-01-06

幕布斯7119047

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊

您可以使用回調(diào)函數(shù)來(lái)執(zhí)行此操作。

您基本上將一個(gè)函數(shù)傳遞給您的子組件，您的子組件將觸發(fā)該函數(shù)，而父組件將具有該值。

這是一個(gè)應(yīng)該如何實(shí)現(xiàn)的簡(jiǎn)單示例：

家長(zhǎng)：

const Parent = () => {

const onSearchResult = searchResults => {

console.log(searchResults)

}

return (

<>

I am the parent component

</>

)

}

孩子：

const Child = onSearchResult => {

const calculateResults = e => {

const results = doSomeStuff(e)

onSearchResult(results)

}

return (

<>

I am the child component

I have a component that will return some value

<input onKeyPress={e => calculateResults(e)}

</>

)

}

反對(duì) 回復(fù) 2023-01-06

不負(fù)相思意

TA貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超10個(gè)贊

子組件應(yīng)該從父組件那里獲取一個(gè)回調(diào)屬性。有點(diǎn)像按鈕的工作方式：

<Button onClick={this.onButtonClick}

你想要的是做

<SearchComponent onSearchResults={this.onResults}

然后，在搜索組件中，您可以調(diào)用this.props.onSearchResults(searchResults);

反對(duì) 回復(fù) 2023-01-06

3 回答
0 關(guān)注
161 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何在不使用 Redux 的情況下在 React 中將變量值從子項(xiàng)發(fā)送到父項(xiàng)

如何在不使用 Redux 的情況下在 React 中將變量值從子項(xiàng)發(fā)送到父項(xiàng)

3 回答

添加回答