为什么从父组件发送的道具成为子组件中的对象？

Question

我正在为我的 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”来管理 show/hide Modal 但没有用，无论如何总是显示 Modal。当我用 docuemnt.write(show) 检查“show”值时，我看到它在父组件中为“false”，但它在 languageModal 子组件中给出了 [object object]。当我更改“显示”初始值时，它不会在子 languageModal 组件内部产生任何影响，除非我通过更改

在其中手动更改它

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

到

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

这就是奇怪的地方。为什么子组件没有收到传递给它的值？它从哪里获取默认值 [object object]，因为“show”不是一个对象而是一个布尔值？那怎么解决呢。非常感谢您的帮助。没有你的帮助我无法前行。

Answer 1

当你这样写 show 时，show 将是 props。这就是为什么它是一个对象。如果你想提取一个特定的属性，你可以做 props.show 或者在功能组件中使用 destructuring 像这样 {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));

Answer 2

您解构 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;

为什么从父组件发送的道具成为子组件中的对象？

Why is props sent from parent component become object in child component?

reactjs

react-props