如何在使用react加载页面时不显示grid.col部分

Question

从GRID开始的表单。COL应在页面加载期间隐藏，一旦用户单击加号按钮，它应显示在页面中。

我尝试不使用css display none选项，而是尝试使用react

请参阅下面列出的代码

const [visible, setVisible] = useState(false)

我尝试了onload，但由于它返回了一个不起作用的布尔值，有人能帮我吗。

Answer 1

尝试低于

{
visible && (
<Grid className="form1">
<Grid.Col span={12} sm={4}>
<TextInput label="Input" />
</Grid.Col>
<Grid.Col span={12} sm={4}>
<Select label="Types" data={types} />
</Grid.Col>
<Grid.Col span={12} sm={4}>
<Select label="Boolean" data={boolean} />
</Grid.Col>
</Grid>
);
}
<Col span={12}>
<Group position="right">
<Box>
<Button
color="green"
leftIcon={
<FontAwesomeIcon
icon={["fas", "plus"]}
color="white"
onClick={test}
/>
}
/>
</Box>
</Group>
</Col>