JavaScriptReact：將prop從子組件中的函式傳遞到父組件中的函式的問題-有解無憂

我正在處理將 prop 從它的子組件傳遞給父組件的問題。

我正在嘗試撰寫的代碼的想法是標題組件中的一組按鈕，當單擊這些按鈕時，會為網站的其他部分加載新的組件頁面。我正在處理一些可以在其他時間修復的較小錯誤，但主要問題是當我嘗試傳遞用于處理開關的函式的結果以及一旦它們到達應用程式時顯示為“未定義”的值零件。我懷疑我解釋得不好，所以請允許我展示代碼。

父組件（應用程式）

import React from "react";
import Header from "./Components/Header/Header";
import Footer from "./Components/Footer/Footer";
import Pane from "./Components/Pane/Pane";
import MainPane from "./Components/Pane/MainPane";
import BookViewPane from "./Components/Pane/BookViewPane";
import AddBookPane from "./Components/Pane/AddBookPane";
import SignInPane from  "./Components/Pane/SignInPane";
import "./App.css";

const App = ()=>{

    function LoadPaneHandler(props){
        var NewPaneName=props.paneName;

        // const NewPaneName={
        //  name: props.paneName
        // };
        
        // const NewPaneName=String(props);

        console.log(NewPaneName);
        switch(NewPaneName){
            case 'MainPane':
                return <MainPane />
            case 'AddBookPane':
                return <AddBookPane />
            case 'BookViewPane':
                return <BookViewPane />
            case 'SignInPane':
                return <SignInPane />
            default:
                return <Pane />
        }
    }

    return(
        <React.Fragment>
            <Header switchPane={LoadPaneHandler} />
            <main>
                <LoadPaneHandler paneName="MainPane" />
            </main>
            <Footer />
        </React.Fragment>
    );
}

export default App;

子組件（標題）

import React from "react";
import "./Header.css";

const Header=(props)=>{
    var paneName="";

    const switchPaneHandler=event=>{
        event.preventDefault();
        console.log(paneName);
        props.switchPane(paneName);
    }

    return(
        <header id="header">
            <div id="header-title">
                <h1>Library</h1>
            </div>
            <div id="header-buttons">
                <button onClick={paneName="BookViewPane",switchPaneHandler}> View Books</button>
                <button onClick={paneName="AddBookPane",switchPaneHandler}> Add Books </button>
                <button onClick={paneName="SignInPane",switchPaneHandler}> Login</button>
            </div>
        </header>
    );
}

export default Header;

我已經包含了我用來獲取函式正常作業所需的資料的其他方法的注釋掉代碼，以便您可以了解我已經嘗試過的內容。

只要我只將值從 App 組件中傳遞給函式，代碼就可以正常作業。每當我單擊標題中的按鈕之一時，它都會在“switchPaneHandler”函式中正確顯示“paneName”，但在“LoadPaneHandler”中它會列印為“undefined”。

我對 React 還是很陌生，所以這可能是我犯的一個非常明顯的錯誤，但同樣感謝任何幫助。謝謝！

uj5u.com熱心網友回復：

嘗試像這樣更改您的子組件（標題）。

import React from "react";
import "./Header.css";
const Header = (props) => {

    const switchPaneHandler = paneName => {
        console.log(paneName);
        props.switchPane(paneName);
    }

    return(
        <header id="header">
            <div id="header-title">
                <h1>Library</h1>
            </div>
            <div id="header-buttons">
                <button onClick={()=> switchPaneHandler('BookViewPane')}> View Books</button>
                <button onClick={() => switchPaneHandler("AddBookPane")}> Add Books </button>
                <button onClick={() => switchPaneHandler("SignInPane")}> Login</button>
            </div>
        </header>
    );
}

uj5u.com熱心網友回復：

在標題組件中，您直接傳遞了paneName，但在父組件中，您試圖將其作為javascript 物件（props.paneName）獲取，這就是您收到錯誤的原因。

const switchPaneHandler=event=>{
    event.preventDefault();
    console.log(paneName);
    props.switchPane(paneName);
}

所以嘗試直接訪問，

function LoadPaneHandler(paneName){
    var NewPaneName = paneName;

    console.log(NewPaneName);
    switch(NewPaneName){
        case 'MainPane':
            return <MainPane />
        case 'AddBookPane':
            return <AddBookPane />
        case 'BookViewPane':
            return <BookViewPane />
        case 'SignInPane':
            return <SignInPane />
        default:
            return <Pane />
    }
}

uj5u.com熱心網友回復：

我認為這里的關鍵問題可能是由“什么是道具？什么是狀態？”的混淆引起的。- 開始使用 React 時很常見。

如果我們首先查看父組件，您就像傳遞LoadPaneHandler給您Header的回呼函式一樣。這不是我們在 React 中的做法。我們需要提供一個回呼函式，該函式采用我們希望父級顯示的窗格的名稱。為了使事情更清晰，命名也確實有幫助。這是我如何重寫你的父母：

const App = ()=>{
    const [currentPaneName, setCurrentPaneName] = React.useState("MainPane")
    
    function updateCurrentPane(newPaneName) {
      console.log(`Updating pane from ${currentPaneName} to ${newPaneName}`);
      setCurrentPaneName(newPaneName)
    }

    function LoadPaneHandler(){

        console.log(`Showing pane ${currentPaneName}`);
        switch(currentPaneName){
            case 'MainPane':
                return <MainPane />
            case 'AddBookPane':
                return <AddBookPane />
            case 'BookViewPane':
                return <BookViewPane />
            case 'SignInPane':
                return <SignInPane />
            default:
                return <Pane />
        }
    }

    return(
        <React.Fragment>
            <Header onNewPaneSelected={updateCurrentPane} />
            <main>
                <LoadPaneHandler />
            </main>
            <Footer />
        </React.Fragment>
    );
}

我console.log在那里留下了一些s 以便您可以了解重新渲染和回應（React -ing ）更改的時間。如果您不熟悉useState()，如果您要構建有用的 React 應用程式，這是您絕對必須了解的一個 React 鉤子-這里是檔案。

現在為了孩子。你有一個paneName變數，但你不需要它。您真正要做的就是在呼叫回呼時設定正確的引數：

const Header=(props)=>{

    const switchPaneHandler= (paneName) =>{
        event.preventDefault();
        console.log(paneName);
        props. onNewPaneSelected(paneName);
    }

    return(
        <header id="header">
            <div id="header-title">
                <h1>Library</h1>
            </div>
            <div id="header-buttons">
                <button onClick={() => switchPaneHandler("BookViewPane")}> View Books</button>
                <button onClick={() => switchPaneHandler("AddBookPane")}> Add Books </button>
                <button onClick={() => switchPaneHandler("SignInPane")}> Login</button>
            </div>
        </header>
    );
}

注意我更改了它期望作為道具給出的回呼函式的名稱 -switchPane有點誤導 -切換窗格不是這個組件的作業，它只需要能夠告訴某人用戶想要切換。這也使將來更容易進行更改，例如，如果您有其他對用戶想要查看的窗格感興趣的內容。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/387112.html

標籤：javascript 反应反应道具

上一篇：如何將更多物件添加到繼續編號但不重新開始的物件陣列中？

下一篇：一個類的多個實體的性能影響