时间戳

首页 > 解决方案 > 如何在 React 中将空元素渲染为 dom？

reactjs - 如何在 React 中将空元素渲染为 dom？

问题描述

我试图在最初加载页面时将一个元素呈现给包含空值的 dom

<small className="error-message">
   <p id="error-msg">{this.state.errorMessage}</p>
</small>

errorMessage最初设置为空字符串，当我的表单中的某些字段未完成时，我设置了错误消息

        this.state = {
            firstName: '',
            lastName: '',
            email: '',
            username: '',
            password: '',
            confirmPassword: '',
            errorMessage: ''
        }

    async handleSubmit(event) {
        event.preventDefault()
        if(!this.state.firstName || !this.state.lastName || !this.state.email || !this.state.username || !this.state.password || !this.state.confirmPassword){

            return this.setState({errorMessage: 'Please complete all fields'})
        }

我的问题是除非设置，否则react 不会将small元素添加到 Dom 。errorMessage这使我的表单垂直扩展以显示错误消息。有什么方法可以让反应渲染small元素，不管它的值errorMessage是什么，所以我的表单保持相同的高度？

标签： reactjs

解决方案

我会为片段设置一个最小高度：

<small className="error-message" style={{ minHeight: 30 }}>
   <p id="error-msg">{this.state.errorMessage}</p>
</small>

推荐阅读