将道具传递给不相关的组件返回未定义答案

【问题标题】：Passing props to unrelated component comes back undefined将道具传递给不相关的组件返回未定义
【发布时间】：2019-12-16 16:31:09
【问题描述】：

我有以下结构：

文件夹 1
- 子文件夹 1
  - 文件.jsx
文件夹 2
- 子文件夹 2
  - 子文件夹 2
    - 文件.jsx

当将布尔值作为道具从文件夹 1 的文件传递到文件夹 2 中的文件时，我得到未定义。我来自文件夹 2 的组件已导入文件夹 1，因此它应该可以工作。任何不使用 Redux 的想法都将受到高度赞赏。

文件夹 1 中的组件：

import React from 'react';
import { useAppContext } from 'fusion:context';
import Image from '../../image/default';
import './style.scss';

const Headline = () => {
  const appContext = useAppContext();
  const { globalContent } = appContext;

  return (
    <div className="article-headline text-align">
      <div className="article-headline-body">
        <h3>{globalContent.headlines.basic}</h3>
      </div>
      <Image isFeatured />
    </div>
  );
};

export default Headline;

文件夹 2 中的组件：

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import './default.scss';

const Image = ({ src, global, isFeatured }) => {
  // console.log(global);


  console.log('is featured', isFeatured);

  /* some unrelated code */


}

Image.propTypes = {
  src: PropTypes.any,
  global: PropTypes.any,
  isFeatured: PropTypes.any,
};

export default Image;

【问题讨论】：

<Image isFeatured /> 应该将isFeatured 设置为 true 吗？
即使我传递了一个设置为 true 的变量，它在文件夹 2 中仍然未定义。我在某处读过一篇文章，对于布尔值，您在传递它时不必将其设置为 true，因为它是自动的是的。
不是“在‘文件夹 2’中未定义”，而是在组件中未定义。组件源的位置无关紧要（假设所有导入都是正确的，看起来确实如此）。其他参数是否有效？如果没有设置proptypes，它可以工作吗？没有特别的原因它不应该工作，例如，stackoverflow.com/q/39326300/438992
其他一切正常。我也尝试过传递 this.props.isFeatured，但仍未定义。
当控制台记录道具时，isFeatured 甚至不存在。它没有到达不相关的组件。

标签： javascript reactjs react-props react-proptypes

【解决方案1】：

PropTypes.any 将返回 undefined 而不是 false 两者在 javascript 中都会变为 false 但您可以设置默认值或将 PropTypes.any 设置为 PropTypes.boolean

【讨论】：

我尝试设置默认值并将道具类型转换为布尔值，结果相同。
抱歉应该是PropTypes.bool
是的，我知道它是 bool，但不幸的是，问题仍然存在，我别无选择。
当控制台记录道具时，isFeatured 甚至不存在。它没有到达不相关的组件。