為什么從父組件發送的道具變成了子組件中的物件？

我正在為我的 React 應用程式實作一個語言翻譯系統，當用戶單擊翻譯圖示時，我一直堅持將語言標志顯示為模態，這應該顯示要翻譯的語言串列。我有一個 LanguageModal.jsx 子組件，它是從 NavigationBar.jsx 父組件觸發的模態。這是兩個組件：

// Languagemodal.jsx
import React from 'react';
import './languageModal.css';
import en from '../../assets/flags/US.png';
import de from '../../assets/flags/DE.png';
import fr from '../../assets/flags/FR.png';

const languageModal = (show) => (show
  ? (
    <div className="Modal">
      <div className="Modal-content">
        <div className="Modal-body">
          <div><img src={en} alt="english" /></div>
          <div><img src={de} alt="deutsch" /></div>
          <div><img src={fr} alt="francais" /></div>
        </div>
      </div>
    </div>
  ) : (null));
export default languageModal;

// NavigationBar.jsx
import React, { useState, useEffect } from 'react';
import { FaGlobe } from 'react-icons/fa';
import logo from '../../assets/logodidi.png';
import Modal from '../LanguageModal/languageModal.jsx';
import './navigationBar.css';

const NavigationBar = () => {
  const [toggleBar, setToggleBar] = useState(false);
  const [show, setShow] = useState(false);
  useEffect(() => {
    setShow(show);
  }, [show]);
  return (
    <div className="navbar">
      <div id="max-width">
        <div className="navbar-items">
          <div className="navbar-items_container">
            <p><a href="#home">home</a></p>
            <p><a href="#usage">Usage</a></p>
            <p><a href="#Categories">Categories</a></p>
            <p><a href="#Blogs">Blogs</a></p>
          </div>
        </div>
        <div className="navbar-sign">
          <p><FaGlobe color="#2b74b7" onClick={() => (setShow(true))} /></p>
          <languageModal show={show} />
          <button type="button">Get started</button>
        </div>
      </div>
    </div>
  );
};

export default NavigationBar;

預期的行為是顯示 僅當用戶點擊FaGlob 圖示時。問題在于，Modal 無需單擊即可自動顯示。所以我使用 React hook useState 和 useEffect 設定變數“show”來管理顯示/隱藏模態但無濟于事，無論如何總是顯示模態。當我使用 docuemnt.write(show) 檢查“show”值時，我看到它在父組件中為“false”，但它在 languageModal 子組件中給出了 [object object]。當我更改“顯示”初始值時，它不會在子 languageModal 組件內產生任何影響，除非我通過更改

const languageModal = (show) => (show
  ? ( ... )

到

const languageModal = (show) => (!show
  ? (...)

這就是奇怪的地方。為什么子組件沒有收到傳遞給它的值？它從哪里獲取默認值 [object object]，因為“show”不是物件而是布林值？那怎么解決呢。非常感謝您的幫助。沒有你的幫助，我不能出去。

uj5u.com熱心網友回復：

您正在show錯誤地解構。將其更新為：

const languageModal = ({show}) => (show
  ? (
    <div className="Modal">
      <div className="Modal-content">
        <div className="Modal-body">
          <div><img src={en} alt="english" /></div>
          <div><img src={de} alt="deutsch" /></div>
          <div><img src={fr} alt="francais" /></div>
        </div>
      </div>
    </div>
  ) : (null));
export default languageModal;

uj5u.com熱心網友回復：

當你這樣寫的時候show，show會props。這就是為什么它是一個物件。如果要提取特定屬性，可以像這樣在功能組件中執行props.show或使用解構{show}

const languageModal = ({show}) => (show
  ? (
    <div className="Modal">
      <div className="Modal-content">
        <div className="Modal-body">
          <div><img src={en} alt="english" /></div>
          <div><img src={de} alt="deutsch" /></div>
          <div><img src={fr} alt="francais" /></div>
        </div>
      </div>
    </div>
  ) : (null));

標籤：

上一篇：ReactRouterv6，如何將<Link/>放入按鈕和事件處理程式中

下一篇：如何在ReactJS中填寫所有輸入欄位之前禁用表單提交按鈕？