小编ama*_*ter的帖子

我有一个 React 函数组件来检查 Children 是否是一个数组。如果它不是数组，则返回它。否则，它会映射子级并返回一些 JSX。

import React from 'react'

interface Props {
  children: React.ReactNode
}

const LineBreak: React.FC<Props> = ({ children }): any => {
  if (!Array.isArray(children)) return children
  return (
    <>
      {children.map((child, i, arr) => {
        if (i + 1 === arr.length) return child
        return <>{child}<br /></>
      })}
    </>
  )
}

export default LineBreak

我想做的是替换any第 7 行。从逻辑上讲，我认为将其更改为React.ReactNode就足够了，但这会引发类型错误：

Type '({ children }: PropsWithChildren<Props>) => ReactNode' is not assignable to type 'FC<Props>'.
  Type 'ReactNode' is not …

Run Code Online (Sandbox Code Playgroud)

我正在构建一个 node.js web 应用程序，对 GUI 和 graphQL 做出反应，与 Apollo 一起提供后端连接到 AWS 上的 RDS (MySQL) 实例。

我正在对用户进行身份验证，然后返回 JWT。我已经弄清楚如何更新/过期令牌，但现在我面临的问题是当用户访问该站点时将它保存在客户端的何处...

有两个主要概念，第三个是混合模型。1) 如HowToGraphQL所述，使用 JavaScript 将其存储为 localStorage 2) 将其存储在 Cookie 中，并将 http-only 设置为 true，如上述文章中所述，作为对 Randall Degges的阳离子引用

还有另一种方法可以将它仅存储在客户端的内存中，但是每次刷新页面时用户都必须登录，因为它不会在任何地方持久存在。

只有当存在另一个 XSS 漏洞已经被利用时，概念 1 才容易受到 XSS 攻击。但它仅对站点是安全的，因此只有在站点上运行的脚本才能访问它，而不能访问任何站点上的脚本。有很多安全讨论认为它不应该以这种方式存储，即使这是常见的方式，因为开发人员不能信任他们在其站点上运行的每个 JavaScript 脚本，并且可能有一个读取 localStorage 然后将其发送到异地.

概念 2 通过声明 http-only 使其只能被您站点上的服务器访问，从而消除了易受 XSS 攻击的漏洞。这里的问题在于，必须创建一个单独的方法来将相同的后端身份验证用于其他用途，例如标准 API（用于本机应用程序或其他站点），其中 JWT 通过 https 发送到标头中安全地在另一台服务器上。

所以我研究并发现了 Ben Awad 描述的这种混合方法3) 使用请求令牌和刷新令牌。然后，请求令牌可以正常用于标准 API，但在我们的 React 应用程序站点上，我们也可以仅将其存储在内存中，并将刷新令牌存储在 cookie 中，以便在用户刷新或关闭并重新打开浏览器时发回请求令牌。

所以理论上，最好的解决方案是概念 3，它解决了所有问题，但设置起来当然更复杂。

我的问题：我应该如何担心向 XSS 漏洞开放 JWT？当我有更多时间时，我会在很长一段时间内完成这项工作，但我正在争取一个截止日期。我的网站将鲜为人知，而不是像 …

如果用户在应用程序升级之间登录到应用程序，那么我想在用户下次访问时注销该用户。

我从 jwt/session 中提取版本并将package.json其存储在 jwt/session 中，以便比较用户通过哪个版本进行身份验证以及现在正在运行哪个版本。

// pages/api/auth/[nextauth].ts
const version = require('../../../package.json').version
import NextAuth from 'next-auth'
import { signOut } from 'next-auth/react'

export default NextAuth({
  providers: [ /*...*/ ],
  session: { strategy: 'jwt' },
  callbacks: {
    async jwt(props) {
      const { token, user, account } = props
      const isSignIn = user?.username ? true :false
      if(isSignIn) {
        token.version = version
        // ...
      }
      if (token?.version !== version) {
        await signOut()
        return {}
      }
      return token
    },
    // ...
  } …

所以我做了一些研究并且接近答案，但是我想要做的事情可能无法单独使用 CSS，我真的希望它是。

如果 id 为 primary 的元素的宽度为 915 或更小，则最终目标是将具有砖类的元素的宽度设置为 90%。

html片段：

<div id='primary'>
    <div class='bricks'>
        <p>div-1</p>
    </div>
    <div class='bricks'>
        <p>div-2</p>
    </div>
</div>

css 片段：

#primary{
    width:100%;
}

.bricks{
    width:45%;
}

@media only screen and ( max-width: 915px ){
    .bricks{
        width:90%;
    }
}

如果屏幕尺寸小于 915 像素，这当前有效并将砖作为类的元素的宽度设置为 90%。然而，问题是有动态内容可能会或可能不会浮动到 id 为主要元素的元素的左侧和右侧。这意味着屏幕尺寸并不总是决定元素的宽度。

问题：有没有办法.bricks根据宽度而#primary不是屏幕大小来设置仅使用 CSS（没有 javascript/php/etc.）的条件 CSS ？

我知道这可以用 javascript 轻松完成，但要使其与其他 javascript/jQuery 插件一起使用，css 必须在 CSS 样式表中设置，而不是在元素样式属性中。

我希望能够使用数字键检索数组的值.问题是,如果密钥超出了数组长度,我需要它再次遍历数组.

$my_array = array('zero','one','two','three','four','five','six','seven');
function loopArrayValues($array,$key){
    //this is what is needed to return
    return 
}
echo "Key 2 is ".loopArrayValues($my_array,2)."<br />";
echo "Key 11 is ".loopArrayValues($my_array,11)."<br />";
echo "Key 150 is ".loopArrayValues($my_array,11)."<br />";

预期产量:

Key 2 is two
Key 11 is three
Key 150 is three

我的研究参考:

• 连续循环遍历PHP数组(或对象键)
• http://php.net/manual/en/class.infiniteiterator.php

我的形成功能:

function loopArrayValues($array,$key){
  $infinate = new InfiniteIterator(new ArrayIterator($array));
  foreach( new LimitIterator($infinate,1,$key) as $value){
    $return=$value;
  }
  return $return;
}

该功能有效,但我有一个问题:这是获得预期结果的好方法吗？

我有一个现有的 javascript 组件：

const RenderState = ({ state, else: elseChild = undefined, ...states }) => {
  if (state && states[state]) return states[state]
  if (elseChild) return elseChild
  return null
}

export default RenderState

我正在尝试将其转换为 typscript 并且到目前为止：

import React from 'react'

interface Props {
  state: string
  else?: JSX.Element
  any: JSX.Element
}

const RenderState: React.FC<Props> = ({ state, else: elseChild = undefined, ...states }) => {
  if (state && states[state]) return states[state]
  if (elseChild) return elseChild
  return null
}

export default RenderState

我遇到的问题当然 …

这是这个问题的sqlfiddle.

我有一张类似的学生桌

student_id | first_name | doing_well
-----------+------------+-----------
1          | John       | NULL
2          | Jane       | NULL
3          | Steve      | 0
4          | Sue        | 1
5          | James      | 0

我想要做的是根据doing_well田地命令学生.表现良好的学生1应该排在最前面,表现不佳的学生应该排在最前面,而表现不佳0的学生NULL应该处于中间位置.

我尝试过使用但ORDER BY FIELD()没有成功

SELECT
  *
FROM
  students
ORDER BY
  FIELD(doing_well,'0',NULL,'1')

我真的想完成这个并保持未定义NULL,而不必将undefined 更改为值.

最终结果应该是这样的

4  | Sue   | 1
1  | John  | NULL
2  | Jane  | NULL
3  | Steve | …