Question

我的应用在一个元素中使用了大量的条件渲染。我一直遇到的问题是表单无法识别条件渲染部分的高度。此外，我在表单底部的 2 个按钮在开发控制台中显示的高度不正确。据我所知，在第一个条件之后，表单高度似乎被切断了。我觉得我在这里遗漏了一些东西，但就是想不通。下面是按钮代码和样式的小片段。

<div className={classes.btnDiv}>
    <Button
        className={classes.resetBtn}
        vaiant="contained"
        color="default"
        onClick={handleResetBtnClick}
    >
        Reset
    </Button>
    <Button
        className={classes.submitBtn}
        variant="contained"
        color="primary"
        type="submit"
    >
        Start
    </Button>
</div>

样式是：

btnDiv: {
        marginTop: "8px",
        minHeight: "30px"
    },
submitBtn: {
        width: "45%",
        fontWeight: "600",
        backgroundColor: "#02578e",
        float: "right",
        '&:hover': {
            backgroundColor: "#213455"
        }
    },
    resetBtn: {
        width: "45%",
        fontWeight: "600",
        backgroundColor: "#d6d9db",
        float: "left",
        '&:hover': {
            backgroundColor: "#949baa"
        }
    },

让我知道这些条件是否有用...我把它们排除在外，因为它们只是 {boolean && <a few components>}

Answer 1

令人尴尬的是，这不是反应问题（感谢@StefanBob！）。这实际上只是我在工作中的平庸 CSS 技能！事情没有正确显示的原因是表单 CSS 中的各种 float 属性。移除漂浮物使所有东西在高度上都能很好地发挥作用。看看帖子评论，看看他们的解释。

反应条件渲染高度问题

1 个答案: