ReactJS - 我怎樣才能使這個選項有條件？

Question

我正在使用FlatPickr 日期/時間模塊，試圖僅在那些需要它的字段上實現 monthSelect 插件。 如何根據我傳入的道具使插件選項“monthSelectPlugin”代碼行有條件？

（參見 Flatpickrdatetime.jsx 中的評論）

下面的代碼出現以下錯誤。 另外，我確信有一種更好的方法可以使一行代碼成為有條件的，我就是為此而來，只是不確定如何。

錯誤：

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都被稱為不必要的。

其次，您可以抽象您的選項 object 在渲染部分之外構建邏輯，並避免所有代碼重復。 您可以使用Memo來記住它的值。 除非type更改（您設置為依賴項），否則它將保留相同的options 。

還有一件事，根據您的邏輯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} />
}