小编Vin*_*rma的帖子

如何在创建反应应用程序中进行应用程序版本控制?

我需要在页脚中以xyz格式显示我的 React 应用程序的版本

如果我想增加xyz,我需要在每次部署应用程序时增加此版本,通过提供一个选择。

我该如何实现这一目标?:)

versioning version build-numbers reactjs webpack

11
推荐指数
2
解决办法
2万
查看次数

无法使用 cli 命令登录 Firebase

我正在尝试使用 cli command 登录我的 Firebase 帐户firebase login。我相信它应该打开浏览器并提示我使用我的谷歌帐户登录,但这似乎没有发生。

相反,它要求我在终端中输入我的电子邮件和密码。输入凭据后,它会引发以下错误:

/usr/lib/node_modules/firebase-cli/node_modules/source-map-support/source-map-support.js:223 return '\n at ' + wrapCallSite(frame); ^ TypeError: CallSite 方法 toString 期望 CallSite 作为接收者

我想将我的应用程序部署到 Firebase 时如何解决这个问题?

authentication firebase firebase-hosting firebase-cli

9
推荐指数
1
解决办法
1322
查看次数

React JS:如何为条件渲染的组件设置动画?

示例是一个功能组件,我在其中有条件地渲染div。我希望它div在有条件渲染时淡入,反之亦然淡出。

为此,我维护了两个本地状态变量:renderfadeIn,它们是根据show传递给示例组件的 prop 计算的。

我所做的是:

  • showprop it true时,我设置rendertrue,因此div有条件地渲染,并且在超时后10ms我设置fadeIntrue,这会将我的 div 的 CSS 类名设置为show
  • showprop it false时,我设置fadeInfalse,这会将我的 div 的 CSS 类名设置为hide超时200ms(CSS 中的过渡时间)后,我将其设置renderfalse,以便div有条件地隐藏。

代码:

interface Props {
  show: boolean;
}

const Example: React.FC<Props> …
Run Code Online (Sandbox Code Playgroud)

css css-transitions reactjs conditional-rendering react-hooks

8
推荐指数
1
解决办法
6527
查看次数

如何在 React JS 中实时显示时间和日期?

简报:

嗨,我创建了一个钩子useDate()来显示当前时间和日期,如下所示:

interface ReturnDate {
  time: string;
  date: string;
  wish: string;
}

export const useDate = (): ReturnDate => {
  const locale = 'en';
  const today = new Date();

  const day = today.toLocaleDateString(locale, { weekday: 'long' });
  const date = `${day}, ${today.getDate()} ${today.toLocaleDateString(locale, { month: 'long' })}\n\n`;

  const hour = today.getHours();
  const wish = `Good ${(hour < 12 && 'Morning') || (hour < 17 && 'Afternoon') || 'Evening'}, `;

  const time = today.toLocaleTimeString(locale, { hour: 'numeric', hour12: true, …
Run Code Online (Sandbox Code Playgroud)

javascript date reactjs redux react-hooks

7
推荐指数
1
解决办法
9277
查看次数

TypeScript:接口属性要求另一个属性为 true

如果foo 为 false,如何将keys:定义a, b, c, bar未定义/空/可选类型?换句话说,仅当foo 为 true时,我才需要强制使用这些属性。

interface ObjectType {
  foo: boolean;
  a: number;
  y: string;
  c: boolean;
  bar?: { x: number; y: string; z: boolean };
}
Run Code Online (Sandbox Code Playgroud)

谢谢!:)

javascript angularjs typescript reactjs redux

7
推荐指数
1
解决办法
2805
查看次数

如何在 GitHub README.md 中使用边距/填充?

问题

我正在尝试在 GitHub 的 README.md 中显示多个图像,x它们之间的边距为px。但出于某种原因,GitHub 似乎剥离了这种margin-right: 30px风格。

降价

[<img style="margin-right: 30px" src=foo.svg height=30>](https://www.example.com/)
[<img style="margin-right: 30px" src=bar.svg height=30>](https://www.example.com/)
<!-- ...and so on -->
Run Code Online (Sandbox Code Playgroud)

注意:align="left" 在这里尝试过它工作正常,但在lg sm xs设备上会中断。

html css github r-markdown readme

6
推荐指数
2
解决办法
670
查看次数

React Native:如何在 Android 和 iOS 中打开操作系统设置?

我正在使用React Native开发移动应用程序,当用户单击特定按钮时,我想在其中打开移动设备的设置

我已经浏览了RN的文档,但仍然找不到任何可以帮助我实现相同目标的内容。有人可以指导我,如何实施?

谢谢 :)

settings android ios react-native

5
推荐指数
3
解决办法
1508
查看次数

Firebase:Invisible reCaptcha 在 React JS 中不起作用

概述

嗨,我在React JS应用程序中使用Firebase 的隐形 reCaptcha进行电话号码身份验证。根据Firebase的文档,您需要提供处理登录表单提交的按钮的id(例如)。sign-in-button

预期行为

一旦用户点击该按钮,Firebase 的隐形 reCaptcha 就会启动并检查它是否已被用户解决。如果 reCaptcha 已解决,则将触发callback 提供者new firebase.auth.RecaptchaVerifier('...', {})。在那个回调中,我们应该向用户的电话号码发送一个 OTP代码。

问题

发生的事情是callback除非在提交登录表单时未发送 OTP,否则不会被触发,这是没有意义的,因为发送 OTP 需要由隐形 reCaptcha 提供的回调处理,而不是通过使用 onSubmit 发送 OTP的形式。

版本

"firebase": "^7.15.1",

代码

import React, { Component } from 'react';

import firebase from 'firebase/app';
import 'firebase/auth';

firebase.initializeApp({
  apiKey: 'xxx',
  authDomain: 'xxx',
  databaseURL: …
Run Code Online (Sandbox Code Playgroud)

javascript firebase reactjs firebase-authentication invisible-recaptcha

5
推荐指数
2
解决办法
1757
查看次数

React JS:使用 object-fit 重新加载时图像大小闪烁:覆盖 CSS 属性

我正在使用 CRA 创建的 React 应用程序中显示图像。每次我重新加载网页时,图像都会奇怪地闪烁,如下所示。

\n

最初的图像:

\n

在此输入图像描述

\n

闪烁后的图像(实际要求):

\n

在此输入图像描述

\n

代码:

\n

样式.css:

\n
img {\n  width: 200px;\n  height: 300px;\n  object-fit: cover;\n}\n
Run Code Online (Sandbox Code Playgroud)\n

应用程序.tsx

\n
import React from \'react\';\nimport foo from \'./foo.jpg\';\n\nimport \'./styles.css\';\n\nconst App = () => <img src={foo} alt="foo" />;\n\nexport default App;\n
Run Code Online (Sandbox Code Playgroud)\n

包.json

\n
{\n  "name": "xyz",\n  "version": "0.1.0",\n  "private": true,\n  "dependencies": {\n    "@testing-library/jest-dom": "^4.2.4",\n    "@testing-library/react": "^9.5.0",\n    "@testing-library/user-event": "^7.2.1",\n    "react": "^16.13.1",\n    "react-dom": "^16.13.1",\n    "react-scripts": "3.4.3"\n  },\n  "scripts": {\n    "start": "react-scripts start",\n    "build": "react-scripts build",\n    "test": "react-scripts …
Run Code Online (Sandbox Code Playgroud)

html javascript css reactjs redux

5
推荐指数
1
解决办法
2585
查看次数

React:更新的状态未反映在递归 useCallback 中

我正在增加foo一个名为recursively的useCallback钩子。但是,增加的值不会反映在回调中。foo

const { useState, useCallback } = React;

const App = () => {
  const [foo, setFoo] = useState(0);

  const recursiveCallback = useCallback(() => {
    // always logs 0
    console.log(foo);

    // incrementing foo
    setFoo(foo + 1);

    setTimeout(() => {
      // recursive call
      recursiveCallback();
    }, 250);
  }, [foo]);

  return <button onClick={recursiveCallback}>Click Me</button>;
}

ReactDOM.render(<App />,document.getElementById('root'));
Run Code Online (Sandbox Code Playgroud)
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
Run Code Online (Sandbox Code Playgroud)

javascript typescript reactjs redux react-hooks

5
推荐指数
2
解决办法
2757
查看次数