简体   繁体   English

为什么有条件时html标签不呈现?

[英]Why html tag doesn't render when there is condition?

I have such code which renders my inputs:我有这样的代码来呈现我的输入:

                                        <Grid container spacing={2}>
                                            {
                                                changedSettings.map((setting) => (
                                                    setting.type !== 'input' || (setting.key === 'utm_value' && setting.type === 'input')
                                                        ? (
                                                            <Grid xs={12} md={6} item key={setting?.key}>
                                                                <SettingsField shouldUseUtm={values['should_use_utm']} inputData={setting} formikVal={values[setting?.key]} settings={changedSettings}/>
                                                            </Grid>
                                                        ) : null
                                                ))
                                            }
                                        </Grid>

But inside SettingsField I have such condition:但在SettingsField我有这样的条件:

             field = (
                <>
                    <Field
                        className={classes.input}
                        name={key}
                        component={TextField}
                        type="number"
                        fullWidth
                        label={label}
                        inputProps={{
                            variant: "outlined"                      
                        }}
                        InputLabelProps={{
                            shrink: true
                        }}
                        variant="outlined"
                    />
                </>

//and then

    return (
        <>
            <Box>
                {field}
            </Box>

        </>
    );

** shouldUseUtm** changes from 0 to 1 and from 1 to 0, and when it's === 1, it should show my but in this case, it renders empty MaterialUi Grid ** shouldUseUtm** 从 0 变为 1,从 1 变为 0,当它是 === 1 时,它应该显示 my 但在这种情况下,它呈现空的 MaterialUi Grid

Also, if i put alert instead of div - it works fine另外,如果我把alert而不是div - 它工作正常

How to solve this problem?如何解决这个问题呢?

A JSX block just generates a value. JSX 块只生成一个值。 Values don't do anything in the middle of a switch statement.值在switch语句的中间不做任何事情。

You need to explicitly do something with the value (eg return it).您需要明确地对该值执行某些操作(例如return它)。

Did you try with return ?你试过return吗?

I mean, something like:我的意思是,类似于:

case 'input': 
        return (<>
            {shouldUseUtm === '1' || shouldUseUtm === 1
                ?
                   <div>fwqfqwf</div>
                 
                : null
            }
        </>)
            break;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM