)逐步：首先导入库本身，但重要的是之后导入所需的CSS。然后配置toast，autoClose表示toast时间长了会自动消失。通过使用toast()函数，您可以使吐司出现。更酷的功能：我们还可以将JSX放入toast中：constnotify=()=>toast(

BigText

)autoClose可以替换为false，因此它永远不会自动关闭。3.react-contextmenu很难想象没有上下文菜单的应用程序，这在网站上也很不常见。这不再是因为越来越多的Web应用程序正在接近真正的桌面应用程序，这些应用程序通常已经提供了类似的良好性能和许多我们多年前从未预料到的功能。这些功能之一是用户对右键单击的评价，它在网站上的使用越来越多。当然，那些是具有许多UI元素的更复杂的控件。通常用于显示所谓的上下文菜单，为此有一个非常方便的React.js库。用法如下：importReactfrom'react'import{ContextMenu,MenuItem,ContextMenuTrigger}from'react-contextmenu'constApp=()=>({/*IDforeveryinstancemustbeindividual*/}

右键点击我！

alert('first')}>1.Itemalert('second')}>2.Item)exportdefaultApp是我们需要右键单击以切换菜单的组件。菜单本身在包装器中定义。对于每个项目，都有一个组件，我们可以给它一个onClick事件来处理我们的用户输入。4.react-lazy-load-image-component在我们的网站上显示大量图片需要一段时间。通常，已经加载并突然出现的图像会导致不愉快的UI用户体验，我们当然希望避免这种情况。response-lazy-load-image-component是一个功能强大的库，可以为用户优化有关图像的所有内容。我们不仅可以创建一个漂亮的模糊效果，就像我在下面的示例中使用桥接加载图像一样，我们还可以延迟加载图像。这可以在下面的官方示例中看到：5.react-onclickoutsideUI设计的一个重要规则是仔细评估尽可能多的用户输入。每个人都应该清楚这一点，但有时很难将这样的东西实现到代码中。一个可以想象的例子是用户折叠菜单。如果你想再次关闭它，90%的用户倾向于简单地点击网站的死区（即不会自行反应的元素）。在几乎所有的专业网站上，这都是完全一样的。要关闭菜单，只需再次单击它旁边的，而不是直接在它上面切换。这种操作有一个库，它是response-onclickoutside，它允许我们在实际元素之外处理点击事件。在下面的示例中，您可以看到我们如何为简单的h1和按钮实现此功能。console.log仅在单击这两个以外的任何内容时输出。处理此事件的函数必须调用handleClickOutside。importReact,{Component}from'react'importonClickOutsidefrom'react-onclickoutside'classAppextendsComponent{handleClickOutside=evt=>{console.log('Youclickedoutside!')}render(){return(

Clickoutside!

不要点击我！

)}}exportdefaultonClickOutside(App)