webkit-transform 相关问题


CSS 中的滚动条问题

/* 自定义 CSS =================================================== */ body::-webkit-滚动条 { 宽度:10px; } body::-webkit-scrollbar-track { 框阴影:插入 0 0 6px rgba(0, 0, 0, 0.3); }


视差滚动问题 - 在 webkit 浏览器中滚动时 div 元素抖动

我创建了一个视差滚动,它在 Firefox 中似乎工作正常,但是在 chrome 浏览器中滚动时正文文本会轻微跳跃。单击此处滚动到“关于”部分...


切换 range-v3 的包含标头顺序后编译失败

当我在range-v3 v0.12.0中一起使用views::set_intersection和views::transform时,标题range/v3/view/set_algorithm.hpp和range/v3/view/transform.hpp的顺序很重要。如果是前者


Dataflow Tensorflow Transform 将转换后的数据写入 BigQuery

在 GCP Dataflow 管道中,我尝试将转换组件中的转换数据写入 Bigquery 中,但出现以下错误。首先,如果有人能让我知道是否...


显示输入类型日期的占位符文本

占位符不适用于直接输入类型日期和日期时间本地。 占位符不适用于直接输入类型 date 和 datetime-local。 <input type="date" placeholder="Date" /> <input type="datetime-local" placeholder="Date" /> 该字段在桌面上显示 mm/dd/yyy,而在移动设备上则不显示任何内容。 如何显示 Date 占位符文本? 使用onfocus="(this.type='date')",例如: <input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/> 使用onfocus和onblur...这是一个例子: <input type="text" placeholder="Birth Date" onfocus="(this.type='date')" onblur="if(this.value==''){this.type='text'}"> 在这里,我尝试了 data 元素中的 input 属性。并使用 CSS 应用所需的占位符 <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> input[type="date"]::before { content: attr(data-placeholder); width: 100%; } /* hide our custom/fake placeholder text when in focus to show the default * 'mm/dd/yyyy' value and when valid to show the users' date of birth value. */ input[type="date"]:focus::before, input[type="date"]:valid::before { display: none } <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> 希望这有帮助 <input type="text" placeholder="*To Date" onfocus="(this.type='date')" onblur="(this.type='text')" > 这段代码对我有用。只需使用这个即可 对于 Angular 2,你可以使用这个指令 import {Directive, ElementRef, HostListener} from '@angular/core'; @Directive({ selector: '[appDateClick]' }) export class DateClickDirective { @HostListener('focus') onMouseFocus() { this.el.nativeElement.type = 'date'; setTimeout(()=>{this.el.nativeElement.click()},2); } @HostListener('blur') onMouseBlur() { if(this.el.nativeElement.value == ""){ this.el.nativeElement.type = 'text'; } } constructor(private el:ElementRef) { } } 并像下面一样使用它。 <input appDateClick name="targetDate" placeholder="buton name" type="text"> 对于 React,你可以这样做。 const onDateFocus = (e) => (e.target.type = "datetime-local"); const onDateBlur = (e) => (e.target.type = "text"); . . . <input onFocus={onDateFocus} onBlur={onDateBlur} type="text" placeholder="Event Date" /> 我是这样做的: var dateInputs = document.querySelectorAll('input[type="date"]'); dateInputs.forEach(function(input) { input.addEventListener('change', function() { input.classList.add('no-placeholder') }); }); input[type="date"] { position: relative; } input[type="date"]:not(.has-value):before { position: absolute; left: 10px; top: 30%; color: gray; background: var(--primary-light); content: attr(placeholder); } .no-placeholder:before{ content:''!important; } <input type="date" name="my-date" id="my-date" placeholder="My Date"> 现代浏览器使用 Shadow DOM 来方便输入日期和日期时间。因此,除非浏览器出于某种原因选择回退到 text 输入,否则不会显示占位符文本。您可以使用以下逻辑来适应这两种情况: ::-webkit-calendar-picker-indicator { @apply hidden; /* hide native picker icon */ } input[type^='date']:not(:placeholder-shown) { @apply before:content-[attr(placeholder)]; @apply sm:after:content-[attr(placeholder)] sm:before:hidden; } input[type^='date']::after, input[type^='date']::before { @apply text-gray-500; } 我使用了 Tailwind CSS 语法,因为它很容易理解。让我们一点一点地分解它: ::-webkit-calendar-picker-indicator { @apply hidden; /* hide native picker icon */ } 使用其 Shadow DOM 伪元素选择器隐藏本机选择器图标(通常是日历)。 input[type^='date']:not(:placeholder-shown) { @apply before:content-[attr(placeholder)]; @apply sm:after:content-[attr(placeholder)] sm:before:hidden; } 选择所有未显示占位符的 date 和 datetime-local 输入,并且: 默认使用 placeholder 伪元素显示输入 ::before 文本 在小屏幕及以上屏幕上切换为使用 ::after 伪元素 input[type^='date']::after, input[type^='date']::before { @apply text-gray-500; } 设置 ::before 和 ::after 伪元素的样式。


如何将下拉面板放置在 mat-select 文本框的正下方

我正在使用 Angular Material 14.0.4 和 Angular 15.1.3。 我有一个垫选择下拉菜单,是这样写的...... 我正在使用 Angular Material 14.0.4 和 Angular 15.1.3。 我有一个mat-select下拉菜单,是这样写的... <mat-select value="5" panelClass="custom-panel"> <mat-option value="5">5</mat-option> <mat-option value="10">10</mat-option> <mat-option value="20">20</mat-option> </mat-select> 在此我应用了panelClass及其CSS代码如下... .custom-panel { top: calc(100% + 10px) !important; } 而且仍然如下。下拉列表与其文本框重叠 这是未选中时的下拉菜单 这是选择后的下拉菜单 如何将面板放置在选择文本框的正下方... 您可以使用下面的CSS来做到这一点! 我们使用csstransform将面板移动到底部! .custom-panel { transform: translateY(25px) !important; } 堆栈闪电战


如何使用 XSLT 删除基于值的特定 XML 元素

假设我们有要转换的 XML: 测试 / 假设我们有要转换的 XML: <?xml version="1.0" encoding="UTF-8"?> <node> <field1>test</field1> <field2>/</field2> <field3>test2</field3> <field4>/<field4> </node> 我想使用 XSLT 1.0 对其进行转换,以便复制整个结构和所有值,除了具有值“/”的元素。 到目前为止,我已经找到了这个,我认为这离我需要的并不遥远,但它还没有工作。 <xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:strip-space elements="*"/> <xsl:output indent="yes"/> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="//text()='/'" /> </xsl:transform> 所以我期望的输出是这样的: <?xml version="1.0" encoding="UTF-8"?> <node> <field1>test</field1> <field3>test2</field3> </node> 尝试此操作时,我收到未指定的错误(因为我正在使用免费的在线工具进行转换)。 //text()='/' 不是有效的位置路径。 在任何情况下,您想要删除元素,而不是文本节点 - 所以您应该使用类似的东西: <xsl:template match="*[.='/']" />


如何使整个跨度落入新行?

这个片段显示了我想要的: http://jsfiddle.net/945Df/3/ 阿根廷圣达菲罗萨里奥。 这个片段显示了我想要的: http://jsfiddle.net/945Df/3/ <div class="sup" id="pr"> <strong> <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span></strong> </div> <div class="sup"> <strong> <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span> </strong> </div> 当div的宽度(在项目中,视口)没有更多空间时,我希望跨度落入新行。 抱歉我的解释不好。我不知道该怎么做。谢谢! 编辑:在第二个示例中,短语“SEPTIEMBRE DE 2013”。落入新行。但“17 DE”字样仍位于上行。我想要“2013 年 9 月 17 日”。落入新行。明白了吗? 如果您希望跨度不换行,而是完全移动到其他文本下方,您可以使用 white-space: nowrap; .date { text-transform: uppercase; color:#848484; white-space:nowrap; } 演示 要让span在空间不足时跳到下一行,可以设置为display: inline-block; .date { display: inline-block; ... } 检查这个:http://jsfiddle.net/945Df/7/ 这就是我实现它的方法: #spantomovedown{ clear: both; display: inline-block; width: 100%; } .date{display:inline-block;} 当日期比div长时,换行显示 示例:http://jsfiddle.net/TqRyK/ 如果你漂浮:对;当不再有空间容纳整个内容时,它应该落到下一行。 之后您将需要一个清除元件。 我通过以下方式实现了它 word-wrap: break word;


嵌套 useFetch 导致 Nuxt 3 中的 Hydration 节点不匹配

在 Nuxt 3 页面内,我通过从 pinia 存储调用操作来获取帖子数据: {{ 发布数据 }} {{ 帖子内容... 在 Nuxt 3 页面内,我通过从 pinia 商店调用操作来获取帖子数据: <template> <div v-if="postData && postContent"> {{ postData }} {{ postContent }} </div> </template> <script setup> const config = useRuntimeConfig() const route = useRoute() const slug = route.params.slug const url = config.public.wpApiUrl const contentStore = useContentStore() await contentStore.fetchPostData({ url, slug }) const postData = contentStore.postData const postContent = contentStore.postContent </script> 那是我的商店: import { defineStore } from 'pinia' export const useContentStore = defineStore('content',{ state: () => ({ postData: null, postContent: null }), actions: { async fetchPostData({ url, slug }) { try { const { data: postData, error } = await useFetch(`${url}/wp/v2/posts`, { query: { slug: slug }, transform(data) { return data.map((post) => ({ id: post.id, title: post.title.rendered, content: post.content.rendered, excerpt: post.excerpt.rendered, date: post.date, slug: post.slug, })); } }) this.postData = postData.value; if (postData && postData.value && postData.value.length && postData.value[0].id) { const {data: postContent} = await useFetch(`${url}/rl/v1/get?id=${postData.value[0].id}`, { method: 'POST', }); this.postContent = postContent.value; } } catch (error) { console.error('Error fetching post data:', error) } } } }); 浏览器中的输出正常,但我在浏览器控制台中收到以下错误: entry.js:54 [Vue warn]: Hydration node mismatch: - rendered on server: <!----> - expected on client: div at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <Anonymous key="/news/hello-world()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/news/hello-world', hash: '', query: {…}, name: 'news-slug', path: '/news/hello-world', …} ... > at <RouterView name=undefined route=undefined > at <NuxtPage> at <Default ref=Ref< undefined > > at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... > at <NuxtLayout> at <App key=3 > at <NuxtRoot> 如何解决这个问题? 我尝试在 onMounted 中获取帖子数据,但在这种情况下 postData 和 postContent 保持为空 onMounted(async () => { await contentStore.fetchPostData({ url, slug }) }) 您可以使用 ClientOnly 组件来消除该警告。请参阅文档了解更多信息。 该组件仅在客户端渲染其插槽。


如何在webview中加载html字符串?

我有一个包含以下内容的html字符串: 我有一个包含以下内容的html字符串: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="spanish press" content="spain, spanish newspaper, news,economy,politics,sports"> <title></title> </head> <body id="body"> <!-- The following code will render a clickable image ad in the page --> <script src="http://www.myscript.com/a"></script> </body> </html> 我需要将该网站显示到 Android 中的网络视图中。 我尝试过这一切: webView.loadDataWithBaseURL(null, txt, "text/html", "UTF-8", null); webView.loadDataWithBaseURL("x-data://base", txt, "text/html", "UTF-8", null); webView.loadDataWithBaseURL("notreal/", txt, "text/htm", "utf-8",null); 我还尝试删除 DOCTYPE 标签: txt=txt.replace("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">", ""); 这些人都没有工作。我刚刚实现了将字符串显示到 webview(html 代码)中,但不是必须使用该 html 代码创建的网站。 出了什么问题? 在 WebView 中加载数据。调用WebView的loadData()方法 wv.loadData(yourData, "text/html", "UTF-8"); 你可以查看这个例子 http://developer.android.com/reference/android/webkit/WebView.html [编辑1] 您应该在 -- " 之前添加 -- \ -- 例如 --> name=\"spanish press\" 下面的字符串对我有用 String webData = "<!DOCTYPE html><head> <meta http-equiv=\"Content-Type\" " + "content=\"text/html; charset=utf-8\"> <html><head><meta http-equiv=\"content-type\" content=\"text/html; charset=windows-1250\">"+ "<meta name=\"spanish press\" content=\"spain, spanish newspaper, news,economy,politics,sports\"><title></title></head><body id=\"body\">"+ "<script src=\"http://www.myscript.com/a\"></script>şlkasşldkasşdksaşdkaşskdşk</body></html>"; 你也可以试试这个 final WebView webView = new WebView(this); webView.loadDataWithBaseURL(null, content, "text/html", "UTF-8", null); 从资产 html 文件中读取 ViewGroup webGroup; String content = readContent("content/ganji.html"); final WebView webView = new WebView(this); webView.loadDataWithBaseURL(null, content, "text/html", "UTF-8", null); webGroup.addView(webView); 我有同样的要求,我是按照以下方式完成的。你也可以试试这个。 使用loadData方法 web.loadData(""" <p style='text-align:center'> <img class='aligncenter size-full wp-image-1607' title='' src="+movImage+" alt='' width='240px' height='180px' /> </p> <p> <center> <U> <H2>"+movName+"("+movYear+")</H2> </U> </center> </p> <p><strong>Director : </strong>"+movDirector+"</p> <p><strong>Producer : </strong>"+movProducer+"</p> <p><strong>Character : </strong>"+movActedAs+"</p> <p><strong>Summary : </strong>"+movAnecdotes+"</p> <p><strong>Synopsis : </strong>"+movSynopsis+"</p> """, "text/html", "UTF-8" ); movDirector movProducer 都是我的字符串变量。 简而言之,我保留了 URL 的自定义样式。 如果您正在 JetpackCompose 中寻找某些内容,这可以帮助您: @Composable fun HtmlTextVisualizerComponent(textFromData: String) { val mimeType = "text/html" val encoding = "UTF-8" LazyColumn( modifier = Modifier .padding( start = 24.dp, end = 24.dp, top = 16.dp, bottom = 24.dp, ), ) { items(1) { val state = rememberWebViewState( url = "data:$mimeType;$encoding,$textFromData", ) val navigator = rememberWebViewNavigator() WebView( state = state, modifier = Modifier.fillMaxSize(), navigator = navigator, onCreated = { it.settings.javaScriptEnabled = true }, ) } } } 一定不要忘记在你的 gradle 中添加依赖项: implementation "com.google.accompanist:accompanist-webview:0.30.1"


如何修复移动设备上 html 中不正确的 <pre> 格式?

我在 html 文件中有一些 ASCII 艺术,位于 标签内。 文本在桌面上以适当的间距正确显示,但在移动设备上查看时格式会变得混乱。 我正在使用 我在 html 文件中有一些 ASCII 艺术,位于 <pre> 标签内。 文本在桌面上以适当的间距正确显示,但在移动设备上查看时格式会变得混乱。 我正在使用等宽字体系列,尝试更改为其他字体,但结果相同。 截图 桌面: 手机: 我已经检查过 Google chrome 和 Brave 浏览器,两者显示的结果相同。 如果有人想自己查看,该页面托管在 ankushKun.github.io 上。 HTML:https://pastebin.com/E89hmN3i CSS:https://pastebin.com/pkuURxsQ html 页面使用 javascript 从 .txt 文件加载附加 html,该文本文件包含 ascii art。任何具有 include-html="file-path" 的 html 标签都将替换为该文件的内容。 TXT:https://pastebin.com/WkDTMNwJ 我尝试过将ascii直接放入.html页面中,但它具有相同的结果,因此这不是将txt文件加载到html中的问题,而是我认为文本在移动设备上的格式化方式有问题。 例如 ██████ ██ ████████ ██ ██ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ███████ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ██ ██ ██████ ██████ 谢谢你。 一种方法可以是测量您的pre,如果它更宽,则屏幕宽度使用css变换缩放它。 let art = document.querySelectorAll('pre')[0]; let artWidth = window.getComputedStyle(art).getPropertyValue('width'); if (window.screen.width < parseFloat(artWidth)) { art.setAttribute('style', 'transform: scale(0.5)'); } <pre> ██████ ██ ████████ ██ ██ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ███████ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ██ ██ ██████ ██████ </pre> 对于未来的读者,问题出在我使用的 ASCII ART 上,它在 Android 上渲染不正确,只需将 ASCII 更改为其他内容并检查它是否正确渲染 很抱歉在这里滥用了SO功能,但我还没有足够的声誉来发表评论,所以我必须将其发布为“答案”。 我不明白公认的答案:“问题在于我使用的 ASCII ART,它在 Android 上渲染不正确,只需将 ASCII 更改为其他内容......” 这是否意味着只需使用图像即可? 毕竟,unicode 块字符并不是真正的 ASCII... 我在这里面临同样的问题...unicode 块和框字符的宽度都相同(很好),但没有一个 unicode 空白似乎具有完全相同的宽度。 (我尝试以这种方式显示二维码,因此空白确实需要完全空白,并且它们需要与块和框字符一致。


在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题

我有一个像这样的简单组件。 从'react'导入React,{useState}; 函数 MyComponentWithState(props) { const [值,setValue] = useState(0); 返回 ( 我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此,为此我准备了 package.json 和 webpack.config.js,如下所示。 package.json: { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json: const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时,这些配置就像魅力一样,但我的观点是本地测试! 我想在发布之前测试这个组件/库。为此,我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。 正如您在上面看到的,我的组件是功能性的,我也使用了钩子。因此,当我将本地链接的库注入到我的主 ReactJs 项目中时,会遇到此错误, 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一: 1.您的React和渲染器版本可能不匹配(例如React DOM) 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本 我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次,我的组件也会导入 React!我的意思是在一个项目中两次 React 导入!. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。 我应该怎么做才能解决这个问题?我的错误在哪里? 更新: 我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的,但没有成功!意思是,我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。 我终于通过这些步骤解决了这个问题。 运行npm链接里面 <your-library-package>/node_modules/react 还有 运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在 应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。 这是我的rollup.config.js: import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json: { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改,npm link在我的ReactJS(Hooks)项目中真正发挥了作用。 请注意,这只是一个简单的 Rollup 配置来展示我的解决方案,您可以在配置中添加多种内容,例如热重载、样式加载器和许多其他插件。 仅在 package.json 的 react 部分(而不是 react-native)内设置 peerDependencies 和 dependencies 包。另外,对于本地开发(当您的包未包含在任何其他 React 项目中并且您想在本地运行它时),您可以使用 devDependencies 字段。 我在打字稿反应项目中解决了这个问题。 可能,当使用 npm link 时,请使用主应用程序项目和组件项目中的 react。 因此,在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案:https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。 就我而言,我开发了一些 UI 组件作为包,其中有一个包含 React 应用程序的示例文件夹,用于创建 React 应用程序。 问题是,当我使用 npm i ../ 将包安装到示例应用程序中时,它会将包中的所有文件安装到示例应用程序中,包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项,示例应用程序现在有两个不同的 React 副本。 从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。


XSL/XSLT - 动态获取父节点及其值

有人可以帮助我吗?我有一个 xml,可以在其中获取节点中节点的名称,例如值、宽度、高度、重量…… 例子: 有人可以帮助我吗?我有一个 xml,可以在其中获取节点中节点的名称,例如值、宽度、高度、重量…… 示例: <?xml version="1.0" encoding="utf-8"?> <Data totalExecutionTime="00:00:00.0076034" totalCount="1">   <Features>     <ProductID id="100" language="NLB" caption="Product ID" captionAlternative="Product ID" unit="" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="" viewGroup="" viewGroupOrder="0" topViewGroupId="b65b432a-1bf1-4fd4-ae92-03418d3204be" topViewGroup="Algemeen" topViewGroupOrder="1" viewOrder="0" form="Complex" dataType="String" readOnly="False" />     <Length id="245" language="NLB" caption="Lengte" captionAlternative="Lengte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="1" form="Simple" dataType="Number" readOnly="False" />     <Width id="242" language="NLB" caption="Breedte" captionAlternative="Breedte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="2" form="Simple" dataType="Number" readOnly="False" />     <Height id="244" language="NLB" caption="Hoogte" captionAlternative="Hoogte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="3" form="Simple" dataType="Number" readOnly="False" />     <Depth id="771" language="NLB" caption="Diepte" captionAlternative="Diepte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="4" form="Simple" dataType="Number" readOnly="False" />     <Weight id="243" language="NLB" caption="Gewicht" captionAlternative="Gewicht" unit="kg" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="5" form="Simple" dataType="Number" readOnly="False" />     <LoadCapacity id="457" language="NLB" caption="Draagvermogen" captionAlternative="Draagvermogen" unit="kg" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="c9d7dd7e-8a85-47cc-8542-2695e4615f75" viewGroup="Technische specificaties" viewGroupOrder="15" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="6" form="Simple" dataType="Number" readOnly="False" />     <Volume id="435" language="NLB" caption="Inhoud" captionAlternative="Inhoud" unit="l" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="bfaf678b-8b9d-4cea-aa99-08edd8316dc7" viewGroup="Algemene specificaties" viewGroupOrder="13" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="7" form="Simple" dataType="Number" readOnly="False" />     <TireSize id="705" language="NLB" caption="Banden maat" captionAlternative="Banden maat" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="c9d7dd7e-8a85-47cc-8542-2695e4615f75" viewGroup="Technische specificaties" viewGroupOrder="15" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="8" form="Simple" dataType="String" readOnly="False" />     <LoadingScoop id="706" language="NLB" caption="Laadschep" captionAlternative="Laadschep" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="c9d7dd7e-8a85-47cc-8542-2695e4615f75" viewGroup="Technische specificaties" viewGroupOrder="15" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="9" form="Simple" dataType="String" readOnly="False" />   </Features>   <ProductID id="25137" parentId="0" brand="Normal" order="0" createdDate="2020-03-24T15:30:07.21" modifiedDate="2023-11-20T20:01:33.87">     <Value seq="0" modifiedDate="2020-03-24T15:30:10.493">111TA5851</Value>     <Width seq="0" modifiedDate="2020-03-24T15:30:10.493">515</Width>     <Height seq="0" modifiedDate="2020-03-24T15:30:10.493">1100</Height>     <Weight seq="0" modifiedDate="2020-04-02T13:18:09.44">7.7</Weight>     <LoadCapacity seq="0" modifiedDate="2020-03-24T15:30:10.493">150</LoadCapacity>     <LoadingScoop seq="0" modifiedDate="2020-03-24T15:30:10.493">350x170</LoadingScoop>   </ProductID> </Data> 我想要的是动态获取对应父节点的值。我可以获得如下节点名称: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <table> <xsl:for-each select="/Data/ProductID/*"> <xsl:variable name="myVariable" select="name(.)"/> <xsl:variable name="HasValue" select="count(/Data/ProductID/*)" /> <tr> <td><xsl:value-of select="name(.)" /></td> <td><xsl:value-of select="local-name()" /></td> <td><xsl:value-of select="name()" /></td> <td><xsl:value-of select="/Data/node($myVariable)/@unit" /></td> </tr> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet> 但我不知道如何获取响应的父节点及其值,例如单位元素。 提前致谢并致以诚挚的问候 我已经尝试过但没用。我会不断收到错误:解析 '' 期间出现意外的标记 '$myVariable'。 我想你想声明一把钥匙 <xsl:key name="element-key" match="Data/Features" use="name()"/> 然后你想使用例如key('element-name', name())/@unit。


动态获取父节点及其值

我有一个xml,我可以在其中获取节点中节点的名称,例如值、宽度、高度、重量... 例子: 我有一个 xml,可以在其中获取节点中节点的名称,例如值、宽度、高度、重量…… 示例: <?xml version="1.0" encoding="utf-8"?> <Data totalExecutionTime="00:00:00.0076034" totalCount="1">   <Features>     <ProductID id="100" language="NLB" caption="Product ID" captionAlternative="Product ID" unit="" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="" viewGroup="" viewGroupOrder="0" topViewGroupId="b65b432a-1bf1-4fd4-ae92-03418d3204be" topViewGroup="Algemeen" topViewGroupOrder="1" viewOrder="0" form="Complex" dataType="String" readOnly="False" />     <Length id="245" language="NLB" caption="Lengte" captionAlternative="Lengte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="1" form="Simple" dataType="Number" readOnly="False" />     <Width id="242" language="NLB" caption="Breedte" captionAlternative="Breedte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="2" form="Simple" dataType="Number" readOnly="False" />     <Height id="244" language="NLB" caption="Hoogte" captionAlternative="Hoogte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="3" form="Simple" dataType="Number" readOnly="False" />     <Depth id="771" language="NLB" caption="Diepte" captionAlternative="Diepte" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="4" form="Simple" dataType="Number" readOnly="False" />     <Weight id="243" language="NLB" caption="Gewicht" captionAlternative="Gewicht" unit="kg" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="28813941-54b4-4511-b91e-d9ae53aa03e9" viewGroup="Afmetingen en gewicht" viewGroupOrder="91" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="5" form="Simple" dataType="Number" readOnly="False" />     <LoadCapacity id="457" language="NLB" caption="Draagvermogen" captionAlternative="Draagvermogen" unit="kg" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="c9d7dd7e-8a85-47cc-8542-2695e4615f75" viewGroup="Technische specificaties" viewGroupOrder="15" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="6" form="Simple" dataType="Number" readOnly="False" />     <Volume id="435" language="NLB" caption="Inhoud" captionAlternative="Inhoud" unit="l" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="bfaf678b-8b9d-4cea-aa99-08edd8316dc7" viewGroup="Algemene specificaties" viewGroupOrder="13" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="7" form="Simple" dataType="Number" readOnly="False" />     <TireSize id="705" language="NLB" caption="Banden maat" captionAlternative="Banden maat" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="c9d7dd7e-8a85-47cc-8542-2695e4615f75" viewGroup="Technische specificaties" viewGroupOrder="15" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="8" form="Simple" dataType="String" readOnly="False" />     <LoadingScoop id="706" language="NLB" caption="Laadschep" captionAlternative="Laadschep" unit="mm" help="" abbr="" groupId="73660834-eea8-4d67-8e84-b38e2742706a" group="Alles" groupOrder="0" viewGroupId="c9d7dd7e-8a85-47cc-8542-2695e4615f75" viewGroup="Technische specificaties" viewGroupOrder="15" topViewGroupId="590c0ee7-e1eb-4e18-b583-eba8984ffe82" topViewGroup="Specificaties" topViewGroupOrder="4" viewOrder="9" form="Simple" dataType="String" readOnly="False" />   </Features>   <ProductID id="25137" parentId="0" brand="Normal" order="0" createdDate="2020-03-24T15:30:07.21" modifiedDate="2023-11-20T20:01:33.87">     <Value seq="0" modifiedDate="2020-03-24T15:30:10.493">111TA5851</Value>     <Width seq="0" modifiedDate="2020-03-24T15:30:10.493">515</Width>     <Height seq="0" modifiedDate="2020-03-24T15:30:10.493">1100</Height>     <Weight seq="0" modifiedDate="2020-04-02T13:18:09.44">7.7</Weight>     <LoadCapacity seq="0" modifiedDate="2020-03-24T15:30:10.493">150</LoadCapacity>     <LoadingScoop seq="0" modifiedDate="2020-03-24T15:30:10.493">350x170</LoadingScoop>   </ProductID> </Data> 我想要的是动态获取对应父节点的hte值。我可以获得如下节点名称: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <table> <xsl:for-each select="/Data/ProductID/*"> <xsl:variable name="myVariable" select="name(.)"/> <xsl:variable name="HasValue" select="count(/Data/ProductID/*)" /> <tr> <td><xsl:value-of select="name(.)" /></td> <td><xsl:value-of select="local-name()" /></td> <td><xsl:value-of select="name()" /></td> <td><xsl:value-of select="/Data/node($myVariable)/@unit" /></td> </tr> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet> 但是我不知道如何获取相应的父节点及其值,例如单位元素。 我已经尝试过<xsl:value-of select="/Data/$myVariable/@unit" /></td>,但不起作用。我会不断收到错误:Unexpected token '$myVariable' during parsing of '<AnyKindTest>'。 我想你想声明一把钥匙 <xsl:key name="element-key" match="Data/Features" use="name()"/> 然后你想使用例如key('element-key', name())/@unit。 你写道: <xsl:value-of select="/Data/$myVariable/@unit" /> 我认为你的问题可能是重复的 使用 2 个参数进行 xslt 测试 您正在尝试使用 $myVariable,就好像它所保存的字符串可以以文本方式替换到您的 XPath 表达式中一样。您可能想要的是 /Data/*[name()=$myVariable]/@unit 很多人都犯过这个错误,但我不知道为什么。我不认为人们会将变量 $op 设置为“+”或“-”,然后期望 @x $op @y 执行适当的加法或减法。除非他们以前的编程经验完全是用宏语言。


在 .NET 6 中使用 xsltc.exe 生成的程序集(XSLT 样式表)

我有一个 XSLT 样式表“Stylesheet.xsl”,我已使用 xsltc.exe 将其编译为“Stylesheet.dll” 该 DLL 包含在我的 .NET 6 中(net6.0 我有一个 XSLT 样式表“Stylesheet.xsl”,我已使用 xsltc.exe 将其编译为“Stylesheet.dll” 该 DLL 包含在我的 .NET 6 (<TargetFramework>net6.0</TargetFramework>) 项目中,用法如下: var xslCompiledTransform = new XslCompiledTransform(); xslCompiledTransform.Load(typeof(Stylesheet)); // ↑ System.IO.FileNotFoundException: Could not load file or assembly 'System.Data.SqlXml, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'. The system cannot find the file specified. xslCompiledTransform.Transform(@"..\..\..\input.xml", @"..\..\..\output.xml"); Load方法抛出FileNotFoundException,并显示消息“无法加载文件或程序集‘System.Data.SqlXml,Version=4.0.0.0,Culture=neutral,PublicKeyToken=b77a5c561934e089’。系统找不到指定的文件。 ” 关于 xsltc.exe 的文档说明了以下内容: 脚本块仅在 .NET Framework 中受支持。 .NET Core 或 .NET 5 或更高版本不支持它们。 这严重暗示使用 xsltc.exe 编译的样式表应该在 .NET Core 或 .NET 5 或更高版本上工作(当不使用脚本块时),但在我的测试中却不起作用。 有谁知道为什么使用 xsltc.exe 编译的样式表不适用于 .NET 6 以及如何解决此问题? 更多详情 我在下面添加了有关我尝试过的更多详细信息。 请注意,我使用的样式表Stylesheet.xsl非常基本,没有使用特殊功能:<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output indent="yes"/> <xsl:template match="/"> <output> <xsl:for-each select="input/book"> <booktitle> <xsl:value-of select="@title" /> </booktitle> </xsl:for-each> </output> </xsl:template> </xsl:stylesheet> 生成DLL的命令: "C:\Program Files (x86)\Microsoft SDKs\Windows\v10.0A\bin\NETFX 4.8 Tools\xsltc.exe" Stylesheet.xsl 在 SDK 样式的 .csproj 文件中引用 DLL: <ItemGroup> <Reference Include="Stylesheet"> <HintPath>.\Stylesheet.dll</HintPath> </Reference> </ItemGroup> input.xml:<input> <book title="First Title" /> <book title="Second Title" /> </input> output.xml 使用未编译的样式表执行转换时:<output> <booktitle>First Title</booktitle> <booktitle>Second Title</booktitle> </output> 我已经研究并发现其他人也有同样的问题,但还没有找到解决方案或解释为什么 Microsoft 文档隐式声明它应该可以工作,而在我的测试中却不起作用。 https://github.com/dotnet/runtime/issues/68129 在.NET Core 2.2中使用xsltc.exe生成的程序集? XslCompiledTransform.Load(type):无法加载文件或程序集“System.Data.SqlXml” System.IO.FileNotFoundException的堆栈跟踪: at System.Delegate.BindToMethodInfo(Object target, IRuntimeMethodInfo method, RuntimeType methodType, DelegateBindingFlags flags) at System.Reflection.RuntimeMethodInfo.CreateDelegateInternal(Type delegateType, Object firstArgument, DelegateBindingFlags bindingFlags) at System.Reflection.RuntimeMethodInfo.CreateDelegate(Type delegateType) at System.Xml.Xsl.XslCompiledTransform.Load(MethodInfo executeMethod, Byte[] queryData, Type[] earlyBoundTypes) at System.Xml.Xsl.XslCompiledTransform.Load(Type compiledStylesheet) at TestXslDotnet6.Program.Main(String[] args) in C:\Users\UserNameRedacted\Path\To\Repo\TestXslDotnet6\TestXslDotnet6\Program.cs:line 10 根据 GitHub 问题 .NET 6 不支持 XslCompiledTransform.Load(type(myXsltCompiled_dll)) 中的信息,看起来好像不支持,也不会支持。 2022年4月18日的评论说: 程序集 System.Data.SqlXml 包含命名空间 System.Xml.Xsl.Runtime,该命名空间在 .NET Core 中不存在。 根据移植指南,msxsl:script 在 .NET Core 上不可用。 .NET Framework 特定教程预计不起作用。 第二个人评论: 看起来 System.Data.SqlXml 是 SQLXML 的一部分,属于 据我所知,SQL Server org 不支持 .NET Core。 第三个人回复: 目前没有关于 SQLXML 和对 .NET 5+ 支持的计划, 我们还没有听到很多这方面的请求。我会 建议在此处开放用户声音以获得一些吸引力并 关于该主题的共识:https://aka.ms/sqlfeedback 所以,这就是您的答案:“msxsl:script 在 .NET Core 上不可用。.NET Framework 特定教程预计不起作用。”原因是非 .NET 组织必须使其成为可能,但没有计划这样做。他们没有意识到需求。 而且,他们承认该文档具有误导性。似乎在 2022 年 5 月对文档进行了更改,并创建了拉取请求:请注意,XSLT 脚本块仅限 .NET Framework。 我认识到这并没有为您提供解决方案或前进的道路,这令人失望。但这就是您问题的答案:.NET 6.0 根本不支持以这种方式进行转换。 虽然距离这个问题大约有两年了,但我还是想分享一下我为自己的目的所做的解决方法,因为我没有找到任何其他解决方案,可以帮助在基于 .NET Core 的转换中使用编译的 xslt dll。 因此,如果您想将 XslCompiledTransform 类与通过 xlstc.exe 生成的 dll 类型一起使用,请按照以下步骤操作: 生成dll类 xsltc.exe /class:Transform /out:Your.Assembly.dll 将 dll 反汇编为 ILL 代码 ildasm Your.Assembly.dll /out=Your.Assembly.ill 将 Your.Assembly.ill 中所有出现的 [System.Data.SqlXml] 替换为 [System.Private.Xml] 将你的IL编译回dll ilasm Your.Assembly.ill /dll 现在您可以将 Your.Assembly.dll 引用添加到您的 .NET Core 项目


© www.soinside.com 2019 - 2024. All rights reserved.