小编Jim*_*Jim的帖子

所以，老实说，我以为这需要 15 分钟，但我现在大约需要 5 个小时。让我如此困扰的是，我知道这是一个简单的解决方案，而且我也尝试了几种不同的方法。

我有一个 React 应用程序，在诊断组件内，有两个下拉元素，允许用户选择其设备的品牌和型号。我想做的是允许用户选择他们拥有的品牌，当选择品牌下拉列表时，模型下拉列表会自动填充。

这是我的 MakeandModel.js 文件：

import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

import makeandmodel_DATA from './makeandmodel_DATA';

const useStyles = makeStyles((theme) => ({
    formControl: {
      margin: theme.spacing(1),
      minWidth: 120,
    },
    selectEmpty: {
      marginTop: theme.spacing(2),
    },
}));

console.log(makeandmodel_DATA);

export default () => {
    const classes = useStyles();
    const [data, setData] = useState();
    const …

我试图理解 React 源代码，代码库中的许多文件将我引导到共享/ReactTypes.js 文件。

在该文件中，有一个符号“|”

根据我自己的研究，我发现这是按位 OR (|) 运算符，解释该运算符的 MDN 文档指出：

在任一操作数或两个操作数的对应位为 1 的每个位位置返回 1。

这对我来说没有任何意义，所以我继续在网络上进行一些研究，包括 Google 和 Stackoverflow，但我在 React 的源代码中找不到任何与其功能相关的内容。

export type ReactNode =
  | React$Element<any>
  | ReactPortal
  | ReactText
  | ReactFragment
  | ReactProvider<any>
  | ReactConsumer<any>;

任何人都可以向我解释一下这一点，或者至少给我发送一些资源来帮助我了解此 React 源代码中发生的情况。

另外，如果您知道重现此代码的任何方法，请告诉我。

提前致谢！！