javascript - 在 Materials-UI TextField 中显示多行错误

Question

因此，我尝试在 textfield 中添加错误字符串(来自 materials UI)，并且我希望错误以多行显示。目前我的 render 方法中有这个:

<TextField
    floatingLabelText={'Input Field'}
    errorText={this.state.errorText}
    type='password'
    onChange={this.foo.bind(this)}
/>

然后组件内部出现以下函数:

foo(e) {
    let multilineText= `First line!
                      Second line!`;
    this.setState({
        errorText: multilineText,
    });
}

我遇到的问题是错误显示在同一行中。我也尝试在字符串中使用诸如 \n 之类的换行符，但它仍然将其显示在同一行中。我应该应用任何特定的样式来使文本显示在两个单独的行中吗？

Answer 1

您可以分配任何元素，而不是分配字符串值，如 DOC :

errorText ------ node ----> The error content to display.

像这样:

<TextField
    floatingLabelText={'Input Field'}
    errorText={error? <div>
                         <div>Hello</div>
                         <div>World</div>
                      </div>
                  : ''
              } 
    type='password'
    onChange={this.foo.bind(this)}
/>