我需要在页脚中以xyz格式显示我的 React 应用程序的版本。
如果我想增加x或y或z,我需要在每次部署应用程序时增加此版本,通过提供一个选择。
我该如何实现这一目标?:)
我正在尝试使用 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 时如何解决这个问题?
示例是一个功能组件,我在其中有条件地渲染div。我希望它div在有条件渲染时淡入,反之亦然淡出。
为此,我维护了两个本地状态变量:render和fadeIn,它们是根据show传递给示例组件的 prop 计算的。
我所做的是:
showprop it true时,我设置render为true,因此div有条件地渲染,并且在超时后10ms我设置fadeIn 为true,这会将我的 div 的 CSS 类名设置为show。showprop it false时,我设置fadeIn为false,这会将我的 div 的 CSS 类名设置为hide超时200ms(CSS 中的过渡时间)后,我将其设置render 为false,以便div有条件地隐藏。代码:
interface Props {
show: boolean;
}
const Example: React.FC<Props> …Run Code Online (Sandbox Code Playgroud) css css-transitions reactjs conditional-rendering react-hooks
嗨,我创建了一个钩子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) 如果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)
谢谢!:)
我正在尝试在 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)
我正在使用React Native开发移动应用程序,当用户单击特定按钮时,我想在其中打开移动设备的设置。
我已经浏览了RN的文档,但仍然找不到任何可以帮助我实现相同目标的内容。有人可以指导我,如何实施?
谢谢 :)
嗨,我在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
我正在使用 CRA 创建的 React 应用程序中显示图像。每次我重新加载网页时,图像都会奇怪地闪烁,如下所示。
\n样式.css:
\nimg {\n width: 200px;\n height: 300px;\n object-fit: cover;\n}\nRun Code Online (Sandbox Code Playgroud)\n应用程序.tsx
\nimport React from \'react\';\nimport foo from \'./foo.jpg\';\n\nimport \'./styles.css\';\n\nconst App = () => <img src={foo} alt="foo" />;\n\nexport default App;\nRun 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) 我正在增加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)
reactjs ×7
javascript ×5
redux ×4
css ×3
react-hooks ×3
firebase ×2
html ×2
typescript ×2
android ×1
angularjs ×1
date ×1
firebase-cli ×1
github ×1
ios ×1
r-markdown ×1
react-native ×1
readme ×1
settings ×1
version ×1
versioning ×1
webpack ×1