ReactJS - 我怎样才能使这个选项有条件？

Question

我正在使用FlatPickr Date/Time module 尝试仅在那些需要它的字段上实现monthSelect 插件。如何根据我传入的道具使插件选项“monthSelectPlugin”代码行有条件？

（参见 Flatpickrdatetime.jsx 中的 cmets）

下面的代码出现以下错误。另外，我确信有一种更好的方法可以使一行代码成为有条件的，我就在这里，只是不确定如何。

错误：

Error: Flatpickrdatetime(...): Nothing was returned from render. 
This usually means a return statement is missing. Or, to render nothing, return null.

到达/离开页面：

import React from 'react';
import { Grid, Typography, FormControl} from '@material-ui/core';    
import Flatpickrdatetime from './FormFields/Flatpickrdatetime';           

<Grid container item spacing={3}>
  <Grid item xs={12} md={6}>
    <InputLabel shrink htmlFor="bootstrap-input">Arrival Date</InputLabel>
    <Flatpickrdatetime type="monthSelect" />
  </Grid>
  <Grid item xs={12} md={6}>
    <InputLabel shrink htmlFor="bootstrap-input">Depart Date</InputLabel>
    <Flatpickrdatetime />
  </Grid>
</Grid>

Flatpickrdatetime.jsx

/* https://flatpickr.js.org/examples/ */
import React from 'react';
import { fade, makeStyles } from '@material-ui/core/styles';
import "flatpickr/dist/themes/light.css";
import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect/index.js";
import "flatpickr/dist/plugins/monthSelect/style.css";
import "flatpickr/dist/themes/light.css";
import Flatpickr from "react-flatpickr";


export default function Flatpickrdatetime(props) {
  const useStyles = makeStyles((theme) => ({
    root: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    margin: {
      marginTop: theme.spacing(3),
      width:'100%'
    },
   flatpickr:{
      marginBottom:'0.25em',
      borderRadius: 4,
   }
  }));
 const classes = useStyles();
  {(() => {
    if (props.type === 'monthSelect'){
        return (
            <Flatpickr
                options={{
                    format: "m/d/Y",
                    altFormat: "m/d/Y",
                    altInput: true,
                    allowInput: true,

                    // if props.type equals monthSelect
                    plugins: [new monthSelectPlugin({shorthand: false, dateFormat: "Y-m-d", altFormat: "M Y"})]
                }}
                className={classes.flatpickr} />
        );
    }else if(props.type != 'monthSelect'){
        return (
            <Flatpickr
                options={{
                    format: "m/d/Y",
                    altFormat: "m/d/Y",
                    altInput: true,
                    allowInput: true,

                    // no plugin if props.type does not equal monthSelect
                }}
                className={classes.flatpickr} />
        );
    }else{
        return null;
    }
  })()}
}

Answer 1

您的IFFE 此处{(() => { 似乎是问题所在。你为什么用它？只需将其删除并保留条件语句就可以了。

Answer 2

您的 IFFE 确实返回了一个值，但它包含在一个块语句中，并且您错过了您的 return 组件。如果你有它像下面会工作，但它并不整洁：

return (() => {return something })()

首先，我建议在组件之外定义您的styles。否则每次重新渲染makeStyles 都被称为不必要的。

其次，您可以在渲染部分之外抽象出您的选项对象构建逻辑，并避免所有代码重复。你可以useMemo 记住它的价值。它将保持相同的 options 除非 type 更改（您设置为依赖项）。

还有一件事，根据您的逻辑，null 永远不会被击中。这是一个不可到达的点，它将始终呈现第一个或第二个条件，因为如果一个是true，另一个是false。

在此之后，您可以将组件设置为：

import React, { useMemo } from 'react';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  margin: {
    marginTop: theme.spacing(3),
    width:'100%'
  },
 flatpickr:{
    marginBottom:'0.25em',
    borderRadius: 4,
 }
}));

export default function Flatpickrdatetime({ type }) {
 const classes = useStyles();

  const options = useMemo(() => {
    const flatpickOps = {
      format: "m/d/Y",
      altFormat: "m/d/Y",
      altInput: true,
      allowInput: true,
    }

    if (type === 'monthSelect') {
      flatpickOps.plugins = [new monthSelectPlugin({shorthand: false, dateFormat: "Y-m-d", altFormat: "M Y"})]
    }
    return flatpickOps
  }, [type])

  return <Flatpickr options={options} className={classes.flatpickr} />
}