小编cro*_*ill的帖子
graphQL 查询中的变量
编辑：现在有下面的工作代码
GraphiQL 版本
我有这个查询来获取gatsby-image：
query getImages($fileName: String) {
landscape: file(relativePath: {eq: $fileName}) {
childImageSharp {
fluid(maxWidth: 1000) {
base64
tracedSVG
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
originalImg
originalName
}
}
}
}
然后这个查询变量：
{
"fileName": "titanic.jpg"
}
以上在GraphiQL 中工作正常。
盖茨比版本
现在我想在 Gatsby 中使用它，所以我有以下代码：
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
export default ({ data }) => (
<div>
<Img fluid={data.landscape.childImageSharp.fluid} />
</div>
)
export const query = (
graphql` …推荐指数
解决办法
查看次数
如何调试[Authorize]属性中的问题
问题
这就是标题中的一切,真的.我有一个[Authorize]属性,总是返回401,我不知道为什么.我如何逐步介绍其背后的逻辑？
更多细节
我正在尝试通过JWT令牌使用Azure AD授权.我已经成功地完成了其他项目,所以我确定问题是一些小的配置问题,但据我所知,我唯一的互动[Authorize]是在Startup.cs,我有这个:
app.UseWindowsAzureActiveDirectoryBearerAuthentication(
new WindowsAzureActiveDirectoryBearerAuthenticationOptions
{
TokenValidationParameters = new TokenValidationParameters
{
ValidAudience = ConfigurationManager.AppSettings["ida:Audience"],
SaveSigninToken = true,
},
Tenant = ConfigurationManager.AppSettings["ida:Tenant"]
});
但该位仅在应用程序启动时运行.否则,[Authorize]对我来说是一种黑盒子.
谢谢您的帮助!
推荐指数
解决办法
查看次数
使用 vanilla javascript，从头部向主体添加类
我想从head标签内进行快速 javascript 检查，如下所示：
<html>
<head>
...
<script>
document.body.classList.remove("no-js");
document.body.classList.add("js");
</script>
</head>
<body class='no-js'>
...
</body>
</html>
这不起作用。Cannot read property classList of null，这...很公平。如果我将<script>标签移动到<body>，一切正常，但我希望<script>标签在<head>.
我有哪些选择？
编辑：我应该对错误更清楚。我意识到问题是当我尝试添加类时主体尚未加载。但是，我最初使用了一些 Modernizr，它以某种方式能够从头部内部修改 body 类，我认为它没有使用window.onload或类似的东西。
推荐指数
解决办法
查看次数
Shadow dom ::part 元素的样式子元素
我有一个 Web 组件，可以在 Shadow dom 中呈现以下内容：
<custom-banner>
#shadow-root
<div part="headertext">
I am the header text!
</div>
...
</custom-banner>
要设置 的样式headertext，以下 css 效果很好：
custom-banner::part(headertext) {
border: 5px solid green;
}
现在说我有这样的东西：
<custom-banner>
#shadow-root
<div part="headertext">
I am the header text!
<span>I am the subheader text!</span>
</div>
...
</custom-banner>
有没有办法针对阴影部分的孩子？也就是说，像这样的东西（这似乎不起作用）：
custom-banner::part(headertext) span {
border: 5px solid red;
}
我意识到这种事情可能会削弱 的整个目的::part，但也许不会？
需要明确的是，在此示例中，子标题范围不是带槽子项。它始终是组件的一部分，并且位于Shadow dom 中。上面的示例是在浏览器中渲染的组件。
谢谢！
推荐指数
解决办法
查看次数
如何处理“无需操作”的 HTTP 响应
我有一个角度应用程序。当用户登录时，应用程序将用户名/令牌对发送到 .NET 后端的 API 路由。
如果用户名/令牌对不存在，.NET 应用程序会将其添加到数据库并返回Created()响应。
但是，如果该对确实存在（并且很可能会存在），则不需要任何操作，也没有任何操作Created()。在这种情况下，我应该返回什么响应？
替代解决方案：我可以针对 API 运行两个请求，一个GET是查看用户/tokan 对是否存在，然后是一个POST请求如果不存在，但这效率不高，需要嵌套的 promise，而且通常不那么漂亮。也许更可取？
推荐指数
解决办法
查看次数
Microsoft 图形查询：用户是组成员吗？
React 应用程序查询 Microsoft Graph 以发现用户是否是特定 Active Directory 组的成员。现在，有这样的路线：
https://graph.microsoft.com/v1.0/me/memberOf
上面的内容在应用程序中确实有效。它返回一个包含所有用户组的（相当大的）对象，因此我可以迭代列表，但最好直接检查用户是否是单个组的成员。
鉴于我已经可以看到所有组的列表，这似乎并不困难，但我没有找到这样做的途径。
我错过了一些明显的东西吗？
谢谢。
PS 如果我可以在不需要应用程序注册的管理员权限的情况下执行此操作，那就太好了。
推荐指数
解决办法
查看次数
React useReducer 和 context：如何提供状态选择器？
我在最初的问题中从未明确明确过，但我试图在不使用Redux 的情况下完成所有这一切，这意味着没有 useSelector();
这是一个仅使用原生 React 来实现选择器的练习。
我正在尝试使用 hooks 构建一个类似 Redux 的安排，并且我从这个人那里大量借用
所以，我们有一个商店：
const CarStore = ({ children }) => {
const [state, dispatch] = useReducer(
carReducer,
[
{
type: 'fast',
mpg: 'bad',
},
],
);
return (
<CarStateContext.Provider value={selectors}>
<CarDispatchContext.Provider value={dispatch}>
{children}
</CarDispatchContext.Provider>
</CarStateContext.Provider>
);
};
export const CarStateContext = createContext();
export const CarDispatchContext = createContext();
现在，dispatch自动可以访问statevia carReducer，这非常好。即时回归！
好吧，无论如何，半个 Redux 吧。我仍然缺少选择器，这就是我的问题。考虑到上述上下文，我怎样才能最好地构建，例如，像getCarType()这样的选择器将“快速”返回到组件？
一个模糊的想法是这样的：
const CarStore = ({ children }) => { …推荐指数
解决办法
查看次数
在打字稿中处理 useRef(null) 的最佳方法
所以，我有这个titleRef
const titleRef = useRef<HTMLHeadingElement | null>(null);
它附加到此标头：
<h1 ref={titleRef}>Hi!</h1>
我想用它来完成一些在屏幕调整大小时设置样式的工作，如下所示：
if (titleRef.current.style.offsetWidth > '10px') {...}
TS不喜欢这样。看，useRef(null)意味着 titleRef可以等于null（这很公平），所以在我使用的任何地方titleRef，我都必须用类似的东西来解释这一点
if (titleRef.current) {
...do the thing
}`
titleRef如果经常使用的话会很麻烦。
有更优雅的方法来处理这种情况吗？直接设置titleRef为?<h1>中的元素 useRef或者，不使用null，而是传递useRef()一些“通用” HTMLHeadingElement？
编辑：可选链接是我尝试的第一件事，但是，这似乎没有帮助：
编辑 2：添加 确实!会清除警告，但它也会使值静态并可能导致麻烦，具体取决于您的用例。
编辑 3：如果您要修改titleRef.current.
如果您不修改该值，仅读取它，那么?应该没问题，但如果不是......
长话短说
虽然下面的答案有时有效，但对我来说，缺点似乎并不值得。现在，我将坚持我的垃圾邮件......
推荐指数
解决办法
查看次数
Jekyll 如何使用 post.html 生成页面？
我在让 Jekyll 使用特定主题时遇到了一些困难，而且我认为我缺少关于如何{{ content }}处理帖子的一些基本知识。
因此，在一个通用的 Jekyll 站点中，index.html在其前端指定了一个布局。生成站点时，布局将包含index.html为{{ content }}. 它有点颠倒，页面指定布局，然后布局调用页面，但足够简单。
另一方面，帖子都是通过一个文件生成的，post.html，该文件驻留在_layouts文件夹中，即使它不是一个真正的布局。就像index.html它本质上只是一个 for 循环。这是我遇到麻烦的地方。
是post.html必填文件吗？我可以重命名story.html吗？
为什么post.html需要在前面进行布局？实际的帖子，即包含所述帖子文本的降价，也需要在其前端布局。是否存在post.html与 markdown 文件中指定的布局不同的布局？
编辑：另一个问题。为什么{{ content }}在多个地方调用？index.html和布局文件都有{{ content }}。为什么布局不简单地 {% include %}index.html并让我们index.html调用 {{ content }}
推荐指数
解决办法
查看次数
在 JavaScript 中制作全局变量的本地副本
根据这个问题，如果我将全局变量作为参数传递给函数，则该全局变量将成为本地副本。
如果是这样，为什么这个 jfiddle 的行为方式如此？警报dog, cat不应该显示而不仅仅是显示cat吗？
我什至比示例更进一步，专门将全局变量复制到局部变量中，但结果是一样的。我真的很希望能够shift()在保持全局完整的同时进行本地化。
推荐指数
解决办法
查看次数
标签 统计
javascript ×3
reactjs ×3
.net ×1
angular ×1
asp.net ×1
css ×1
gatsby ×1
graphql ×1
http ×1
jekyll ×1
liquid ×1
markdown ×1
react-hooks ×1
ruby ×1
shadow-dom ×1
typescript ×1