Reactjs 如何关闭office组件的错误消息栏？

我试图在我的应用程序中使用fabric react messageBar组件，但即使单击messageBar组件中的close图标，我也无法关闭（解除）消息部分

请查找以下代码以供参考

import React from 'react'
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib-commonjs/MessageBar'

class MyMessage extends React.Component{

    log=(event)=>{
        console.log('close on test');

    }

    render(){      

        return(
         <div> 
            <MessageBar
            componentRef={(messageBar)=>{this.errorMsgBar = messageBar}}
      messageBarType={MessageBarType.error}
      isMultiline={false}
      onDismiss={(event)=> this.log(event)}
      dismissButtonAriaLabel="Close"
    >
      Error lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.{' '}

    </MessageBar>
</div>

        )
    }
}


export default MyMessage;

从“React”导入React
从“office ui fabric react/lib commonjs/MessageBar”导入{MessageBar，MessageBarType}
类MyMessage扩展了React.Component{
日志=（事件）=>{
console.log（“关闭测试”）；
}
render（）{
返回(
{this.errorMsgBar=messageBar}
messageBarType={messageBarType.error}
isMultiline={false}
onDismiss={（事件）=>this.log（事件）}
dismissbuttonialabel=“关闭”
>
错误lorem ipsum dolor sit amet，一个精英团队与精英团队之间的精英团队。{''}
)
}
}
导出默认MyMessage；

Office fabric将作为默认关闭功能，还是我需要关闭它

如果我需要关闭它，请让我知道我们如何才能做到这一点

提前谢谢

---

-Nagaraju

您可以尝试以下方法：

import React from 'react'
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib-commonjs/MessageBar'

class MyMessage extends React.Component{
    constructor(){
      super();
      this.state = {
         showMessageBar: true  
      }
    }

    closeMessageBar = () => {
        this.setState({showMessageBar: false})    
    }

    render(){      

        return(
         <div> 
            {this.state.showMessageBar && <MessageBar
              componentRef={(messageBar)=>{this.errorMsgBar = messageBar}}
              messageBarType={MessageBarType.error}
              isMultiline={false}
              onDismiss={()=> this.closeMessageBar()}
              dismissButtonAriaLabel="Close"
            >
             Error lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.{' '}
           </MessageBar>}
</div>

        )
    }
}


export default MyMessage;

从“React”导入React
从“office ui fabric react/lib commonjs/MessageBar”导入{MessageBar，MessageBarType}
类MyMessage扩展了React.Component{
构造函数（）{
超级（）；
此.state={
showMessageBar：正确
}
}
closeMessageBar=（）=>{
this.setState（{showMessageBar:false}）
}
render（）{
返回(
{this.state.showMessageBar&&{this.errorMsgBar=messageBar}
messageBarType={messageBarType.error}
isMultiline={false}
onDismiss={（）=>this.closeMessageBar（）}
dismissbuttonialabel=“关闭”
>
错误lorem ipsum dolor sit amet，一个精英团队与精英团队之间的精英团队。{''}
}
)
}
}
导出默认MyMessage；

Thank you@Lazar Nikolic我想我可能对我的基本要求很严格，因为我在messageBar组件中查找了一些内容，但您的解决方案解决了我的问题谢谢您让我知道。如果问题不多，你能投票表决我的答案并将其标记为已解决吗？