[英]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.