javascript - HTML 文本未正确呈现

Question

我在应用程序中有一个邮件部分。为此，我正在使用 ReactSummerNote。

我在应用程序中有 5 个侧选项卡和 2 个主选项卡，如下所示：

现在，当我在“发送邮件”并单击“功效”时，我得到了正确的输出。如您所见，我已在体内加载功效，您会看到功效的正确大小，即 h2。

但是，当我切换到“发送文本”选项卡然后返回“发送邮件”选项卡时，我看到了一个不同的输出，其中甚至显示了 h2 标签，我想删除这些标签。我还看到了某种字符串和 ap 标签，它们也被添加了。其他标签也有同样的问题。

这是我管理切换的代码。'textMail' 状态用于处理发送邮件和发送文本的切换。sideBarClick 状态用于处理功效、患者护理等之间的切换。

 class EngageWithHCP extends Component {

state = {
    subject: "",
    summerNoteBody: '',
    textMail: 'mail',
    sideBarClick: '',
    textBody: '',
}

  <div class="file-manager">
<div class="form-group" style={{display: 'flex'}}>
    <button style = {{ marginRight: '10px'}}onClick={() => { this.toggleTextMail('mail') }}
        className={this.state.textMail === 'mail' ? "btn btn-primary" : "btn btn-white"}>
        Send Mail
    </button>
    <button onClick={() => { this.toggleTextMail('text') }}
        className={this.state.textMail === 'text' ? "btn btn-primary" : "btn btn-white"}>
        Send Text
    </button>
</div>
<div class="space-25"></div>
<h5>Templates</h5>
<ul class="category-list" style={{ padding: 0 }}>
    <li><button style={{ textAlign: 'left' }} onClick={() => this.sideBarClick('efficacy')}
        className={this.state.sideBarClick === 'efficacy' ? "btn btn-primary btn-block" : "btn btn-white btn-block"}>
        <i class="fa fa-circle text-navy"></i>Efficacy
        </button>
    </li>
    <li><button style={{ textAlign: 'left' }} onClick={() => this.sideBarClick('patientCare')}
        className={this.state.sideBarClick === 'patientCare' ? "btn btn-primary btn-block" : "btn btn-white btn-block"}
    >
        <i class="fa fa-circle text-danger"></i>Patient Care
        </button>
    </li>
    </div>

在上面的代码中，我调用了 2 个函数，toggleTextMail 和 sideBarClick。这是处理发送邮件和发送文本切换的 toggleTextMail 函数：

    toggleTextMail = (textMail) => {
    this.setState({ textMail: textMail, textBody: '' });
    if (this.state.textMail === 'mail' && this.state.sideBarClick === 'efficacy') {
        var efficacyText = this.props.mailData[301].template_info[0].template_body_msg
        this.setState({ textBody: efficacyText })
    }
    else if (this.state.textMail === 'mail' && this.state.sideBarClick === 'patientCare') {
        var patientCareText = this.props.mailData[301].template_info[1].template_body_msg
        this.setState({ textBody: patientCareText })
    }
    else if (this.state.textMail === 'text' && this.state.sideBarClick === 'efficacy') {
        var efficacyText = this.props.mailData[301].template_info[0].template_body_email
        var efficacySubject = this.props.mailData[301].template_info[0].template_subject
        this.setState({ summerNoteBody: efficacyText, subject: efficacySubject })
    }
    else if (this.state.textMail === 'text' && this.state.sideBarClick === 'patientCare') {
        var patientCareText = this.props.mailData[301].template_info[1].template_body_email
        var patientCareSubject = this.props.mailData[301].template_info[1].template_subject
        this.setState({ summerNoteBody: patientCareText, subject: patientCareSubject })
    } 

这是处理功效、患者护理等切换的 sideBarClick 功能。

   sideBarClick = (tab) => {
    if (this.state.textMail === 'mail') {
        if (tab === 'efficacy') {
            var efficacyText = this.props.mailData[301].template_info[0].template_body_email
            var efficacySubject = this.props.mailData[301].template_info[0].template_subject
            this.setState({ summerNoteBody: efficacyText, subject: efficacySubject, sideBarClick: 'efficacy' })
        }
        else if (tab === 'patientCare') {
            var patientCareText = this.props.mailData[301].template_info[1].template_body_email
            var patientCareSubject = this.props.mailData[301].template_info[1].template_subject
            this.setState({ summerNoteBody: patientCareText, subject: patientCareSubject, sideBarClick: 'patientCare' })

        }
   else if (this.state.textMail === 'text') {
        if (tab === 'efficacy') {
            var efficacyText = this.props.mailData[301].template_info[0].template_body_msg
            this.setState({ textBody: efficacyText, sideBarClick: 'efficacy' })
        }
        else if (tab === 'patientCare') {
            var patientCareText = this.props.mailData[301].template_info[1].template_body_msg
            this.setState({ textBody: patientCareText, sideBarClick: 'patientCare' })
        }

谁能让我知道为什么我会遇到这个问题？我应该在代码中进行哪些更改以避免这种情况？

编辑 1： 再补充一点，状态“summerNoteBody”是控制具有功效的盒子的东西。'textBody' 状态适用于我尚未添加屏幕截图的另一个选项卡（发送文本）。所以请检查我设置summerNoteBody状态的区域。

标签： javascripthtmlreactjs