草庐IT

网页组件

全部标签

javascript - React - 将所有数据从 json 加载到组件中

我正在使用React并尝试将数据从本地json文件加载到我的组件中。我正在尝试打印所有信息,包括名称:值对(不仅仅是值)中的“名称”,以使其看起来像一个表单。我正在寻找执行此操作的最佳方法。我需要解析吗?我需要使用map功能吗?我是React的新手,所以请向我展示带有代码的解决方案。我见过与此类似的其他问题,但它们包含许多我认为不需要的其他代码。我的代码示例:测试.json{"person":{"name":"John","lastname":"Doe","interests":["hiking","skiing"],"age":40}}测试.jsimportReact,{Compon

javascript - React-Select - 替换自定义选项内容的组件

使用React-Select(版本2),我希望有自定义设计(选择)选项。文档表明ReplacingComponents将是我可以用来实现这一目标的方法。很遗憾,我无法找到显示此功能实现的示例。有没有人可以向我展示此功能的用法,您将拥有一个简单的自定义选项(可能是一个标签和值,每个选项标签的左侧还包含一个SVG图形)。提前致谢 最佳答案 对于大多数用例,您可能不需要替换完整的选项组件。如果您希望保留与选项相同的整体结构和外观,但您想要显示多个文本block、图像或对每个选项的主体进行一些其他特殊处理,则有一个更简单的方法方式。那就是使

javascript - React 内联条件组件属性

我一直在到处搜索,但找不到我的问题的答案。所以我想要一个只在特定条件下显示的条件属性,例如:如您所见,我只想在this.state.view时指示按钮事件等于默认值。但是,我得到Unexpectedtoken,error...但是当我尝试在它之前放置一个属性时,例如:它通过了语法错误并显示正常,但这不是我想要实现的。我该如何解决这个问题?它没有通过的原因可能是什么?更新所以我刚刚在react-bootstrap中发现属性(property)active是active=true的简写所以我用解决了它所以万一有人遇到这个问题,我就把它留在这里。但是,我仍然想知道为什么条件属性在没有将其包含

javascript - 如何检测响应式网页设计的屏幕尺寸?

我用谷歌搜索并得到一个quirksmodesite给你你的屏幕尺寸。拉起控制台,我看到screen.width和screen.height可以直接从window对象获得。我想开始使用纯JavaScript进行检测。我可以在所有设备和浏览器(手机、平板电脑、PC和Chrome、Safari、IE、Firefox)上使用此属性吗?我不关心视口(viewport)因调整大小等而发生变化。只关心屏幕的实际大小不会改变。我希望有一个属性可以跨设备和浏览器检查。这是wikipediaonresponsivewebdesign.提供的一些一般信息 最佳答案

javascript - 网页不透明度?

我经常看到网站上的表格有60-80%的不透明度。他们看起来真的很酷,但我不确定他们为什么要这样做。是Javascript,还是图像?如何更改表格的不透明度? 最佳答案 您可以在CSS中完成,但需要一些技巧才能使其跨浏览器工作。selector{filter:alpha(opacity=50);/*internetexplorer*/opacity:0.5;/*fx,safari,opera,chrome*/-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"

javascript - 如何阻止用户打印网页?使用 javascript 或 jquery

我们如何阻止用户使用不同的方法打印网页?禁用右键单击禁用CtrlP组合键右键单击->打印有什么办法可以停止打印网页吗?我们可以使用javascript处理这3个事件吗?或者我们可以说。如果用户将执行任何这些事件。然后我想运行我的其他代码。这可能吗? 最佳答案 如前所述,您不能这样做。然而,一个常用的技巧是尝试隐藏所有正在打印的页面内容:body{visibility:hidden;display:none}但这不能保证有效,即使您对自己在做什么有一个模糊的想法,也很容易绕过。 关于jav

javascript - react 多个高阶组件

我刚刚发现在我的React项目中使用HOC的惊人好处。我的问题是在一个组件上调用多个HOC函数会影响性能吗?示例exportdefaultwithState(withLabel(withTheme(MyComponent)))这当然只会渲染一个组件,但是看看我的react开发工具,我可以看到输出的HOC组件有三个层次。这是需要警惕的事情还是有更好的方法在组件上调用多个HOC? 最佳答案 你的语法相当于做:性能影响将取决于这些HOC的实现方式。您可能必须逐一查看。例子:ThemeProviderHOC通常在React上下文中存储一堆颜

javascript - 如何忽略 node.js 中另一个文件或组件所需的文件

以下可以忽略或对导入的文件进行一些修改,例如在我的index.js中require.extensions['.js']=function(file){console.log(file.id)return;};但是我真的不想忽略index.js中的这些文件我想忽略在后续文件/组件中导入的文件require.extensions['.js']=function(file){console.log(file.id)return;};require('babel-register')require('./components/Test.spec.js');例如,这会记录以下内容并返回/User

javascript - 个人资料图片未跨组件更新 Angular 5

我有一个弹出的更改个人资料图片模式,所以你上传图片按保存,应该发生的是个人资料图片在整个网站上更新,但没有发生,只有在你刷新个人资料图片后才会更新个人资料图片更改模式的我的保存功能save():void{constself=this;this.saving=true;self._profileService.updateProfilePicture(input).finally(()=>{this.saving=false;}).subscribe(()=>{constself=this;self._$jcropApi.destroy();self._$jcropApi=null;ab

javascript - 使用在组件类中找到的变量修改伪元素属性值的 Angular/Mobile 友好方式是什么?

有没有比我目前正在做的更好的方法来使用组件变量修改伪元素属性?我没有按照Angular的方式来做,但这是我的目标。我的方式在移植到移动设备时肯定会失败。我想在组件样式表中放置一个变量:组件:@Input()publicvariable=variable;组件样式表:input[type=range].MPslide.pvd-slider::-webkit-slider-runnable-track{background:linear-gradient(#568200,#568200)0/variable100%no-repeat#ccc}不幸的是,它不存在于我的模板中,所以我无法在其上