小编Cha*_*wis的帖子

我正在尝试在 Ubuntu 18.10 上使用 create-react-app 创建一个新的 ReactJS 应用程序。当我运行时，create-react-app myapp我收到以下注释：

注意：该项目是使用不受支持的旧版本工具启动的。请更新到 Node >=6 和 npm >=3 以在新项目中获取支持的工具。

但是当我检查我的节点版本时，node -v我得到 v10.13.0 并检查 npmnpm -v显示 6.4.1。create-react-app --version显示 2.1.1。所以我的 Node 版本和 npm 版本都大于指定的版本。

我不知道该怎么办，因为我的版本已经高于指定的版本。对于如何解决这个问题，有任何的建议吗？

我正在尝试为 Cypress 创建登录命令，并注意到他们关于如何执行此操作的博客与Auth0 React SDK的预期值不匹配。看起来他们使用了自定义的 Express 应用程序来处理登录，而不是使用 SDK 来处理登录（根据官方 Auth0 文档）。

Cypress官方文档生成了一个本地存储键值对，如下所示。

const item = {
        body: {
          decodedToken: {
            claims,
            user: { ... },
            audience,
            client_id,
          },
        },
        expiresAt: exp,
      }

window.localStorage.setItem('auth0Cypress', JSON.stringify(item))

然而，由 Auth0 React SDK 创建的生成的内容类似于：

const item = {
      body: {
        access_token,
        audience,
        client_id,
        decodedToken: {
          claims,
          user: { ... },
          encoded,
          header
        },
        expires_in,
        id_token,
        scope,
        token_type
      },
      expiresAt: exp
    }

window.localStorage.setItem(`@@auth0spajs@@::${client_id}::${audience}::${scope}`, JSON.stringify(item))

我能够使https://${auth)_domain}/oauth/token请求正常工作，但是无法弄清楚如何从响应中获取数据，以使其适合 Auth0 React SDK 想要的数据结构。 …

我希望仅将填充添加到填充元素的最后一行。我使用 Tailwind 类有以下 html：

<div className="my-3 max-h-[4.5rem] relative">
  <p ref={ref} className="inline-block line-clamp-3 pr-14">{data.description}</p>
  <button className="text-blue-600 leading-none absolute bottom-[-4px] right-0 font-medium px-2 py-1" onClick={() => setOpen(true)}>
    more
  </button>
</div>

右填充pr-14应用于整个p标签。我怎样才能让它只适用于最后一行？我已经尝试过等等block，inline但似乎都没有什么区别。这在 CSS 中可能吗？

对于上下文，当我需要显示“更多”按钮时，我尝试在最后一行添加填充。我能想到的唯一选择是执行类似下图的操作，但是不确定如何让文本淡入背景（我无法将背景应用到背景，more因为它是透明的）。

在Cloud Firestore中，我需要使用array-contains查询在包含地图的数组中找到匹配项。

我可以很容易地匹配直接字符串，数字等，但是当数组的值是映射时，它总是失败。文档没有暗示这是否可能。

这是一些数据的例子

{
 data:
    [
        item_1: {...},
        item_2: {...}
    ]
}

这是查询的示例

db.collection("list")
  .where("data", "array-contains", "item_1")
  .get()
  .then(collectionRef => {
      //do something with collection
  })

我期望数组包含的内容与地图的最高值（item_x）匹配，此刻与此不匹配。我认为这是因为它想将地图的整个内容匹配为数组项的“值”。

任何帮助，将不胜感激。如果这不可能，我可能不得不重新考虑我的数据结构。对于上下文，我在云函数中使用此函数在原​​始文档更新时更新数组中的项目（它们是对文档的引用）。

我有以下 useEffect 函数，并试图找到在组件卸载时清理它的最佳方法。

我认为最好遵循makeCancelableReact文档中的，但是，当 Promise 被取消时，代码仍然会执行。

const makeCancelable = (promise) => {
  let hasCanceled_ = false;

  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then(
      val => hasCanceled_ ? reject({isCanceled: true}) : resolve(val),
      error => hasCanceled_ ? reject({isCanceled: true}) : reject(error)
    );
  });

  return {
    promise: wrappedPromise,
    cancel() {
      hasCanceled_ = true;
    },
  };
};

//example useEffect
useEffect(() => {
  const getData = async () => {
    const collectionRef_1 = await firestore.collection(...)
    const collectionRef_2 = await …

我有一个使用特定国家/地区页面的网站。因此，对于每个页面，都有一个特定于国家/地区的 URL。例如：example.com/au/blog，example.com/us/blog，example.com/uk/blog。这很棒，因为我们可以展示与每个国家/地区更相关的内容。

这个想法和我们的主页是一样的：example.com/au, example.com/us, example.com/uk。

当用户访问非特定国家/地区的 URL（即）时example.com，example.com/blog服务器将转而提供更通用的内容。然后，我们在客户端上显示一个横幅，供用户决定是否要访问特定于国家/地区的页面。

考虑到这一点，我添加了以下元标记，并在使用 Lighthouse 进行测试时收到以下错误。

<link rel="canonical" href="https://www.example.com/">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/">
<link rel="alternate" hreflang="en-GB" href="https://www.example.comt/uk/">
<link rel="alternate" hreflang="en-US" href="https://www.example.com/us/">
<link rel="alternate" hreflang="en-AU" href="https://www.example.com/au/">

//error
The document does not have a valid rel=canonical. Points to the domain's root URL (the homepage), instead of an equivalent page of content. 

这是通知爬虫的正确方法吗：

• 站点根目录是原始文档
• 网站根目录不针对任何语言或区域设置
• 此页面的替代选项是 en-GB、en-US 和 en-AU

如果是这样，为什么 Lighthouse 在主页上抱怨这个错误？它不会在任何其他页面上抱怨这一点。

我对规范化和提供替代语言页面不熟悉，所以我可能会遗漏一些明显的东西。

我有一个段落标签，我想检查省略号是否显示，但我正在使用-webkit-line-clampcss 属性。

我有以下组件和挂钩，但是使用宽度值不起作用。scrollWidth、clientWidth和的值offsetWidth始终相同。

const Description = ({ data }: Props) => {
  const [open, setOpen] = useState<boolean>(false);
  const ref = useRef<HTMLParagraphElement>(null);
  const isTruncated = useIsTruncated(ref);

  return (
    <>
      <div className="my-3 max-h-[4.5rem] relative">
        <p ref={ref} className="inline line-clamp-3">
          {data.description}
        </p>
        {isTruncated && (
          <button
            className="text-blue-600 leading-none absolute bottom-0 right-0 font-medium"
            onClick={() => setOpen(true)}
          >
            more
          </button>
        )}
      </div>
      <Modal open={open} setOpen={setOpen} />
    </>
  );
};


const useIsTruncated = (element: RefObject<HTMLParagraphElement>) => {
  const determineIsTruncated …

使用 React 时，渲染组件时有什么区别（以及何时应该应用每种方法）？

这是否会以任何方式影响组件生命周期？或者影响钩子在组件中的运行方式？

方法一：

class App extends React.Component {
  ...
  function getComponent() {
    return <Component />
  }
  render() {
   return this.getComponent()
  }
}

方法二：

class App extends React.Component {
  ...
  render() {
   return <Component />
  }
}

我最近发现了一种在 JSX 中条件渲染组件的替代方法，即使用hiddenHTML 属性。

例子

function Parent() {
  return {!hideChild && <Child />}
}

对比

function Parent() {
  return <Child hidden={hideChild} />
}

function Child({ hidden }) {
  return (
    <div hidden={hidden} >
      //my content
    </div>
  )
}

到目前为止，我在使用hidden. 话虽如此，在隐藏的页面上有很多 HTML 有什么缺点吗？

对我来说，当我想保留组件状态并具有切换组件 UI 可见性的功能时，这种方法非常有用。

这是不好的做法吗？我们应该有条件地渲染组件吗？

我是使用 css 属性的新手clip-path，并且创建了一个几乎符合我的要求的形状。

我希望创建以下形状，但是很难将我必须的正方形转换为圆形。

.ticket {
  background-color: blue;
  height: 100px;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
  clip-path: polygon(
  0 0,
  0% 42%,
  5% 42%,
  5% 58%,
  0 58%,
  0 100%,
  100% 100%,
  100% 58%,
  95% 58%,
  95% 42%,
  100% 42%,
  100% 0
  );
}

<div class="ticket"></div>

使用这个属性可以吗？如果没有，我如何使用 SVG 来实现这一目标？是否也可以向这个剪切的蒙版添加阴影？正如您在片段中看到的那样，阴影并没有真正起作用。