小编Cri*_*rez的帖子

我在查询时遇到问题，我正在尝试获取两个无线电输入，其中之一没有任何问题，但另一个反应测试库引发了错误：It Found multiple elements with the role "radio" and name /to/i:

查询

test('Render form with default items', () => {
  const handleUpdateValue = jest.fn();
  const handleNextStep = jest.fn();
  render(
    <Form
      handleNextStep={handleNextStep}
      updateValue={handleUpdateValue}
      transferFundsValues={{}}
    />
  );

  const amountInput = screen.getByLabelText(/amount/i);
  const fromRadio = screen.getByLabelText(/from/i);
  const toRadio = screen.getByLabelText(/to/i);
  const messageInput = screen.getByLabelText(/message/i);

  const continueButton = screen.getByRole('button', { name: /continue/i });
  const cancelButton = screen.getByRole('button', { name: /cancel/i });

  // If no value has been entered to the inputs, the continue …

我希望环境变量有不同的配置文件，并且能够在我的下一个项目中使用它们。我看到了dotenv的例子。

但我不喜欢在 .env 文件中定义变量，也不想在 config.next.js 文件中定义它们。如果由于某种原因我将变量放在 .env 文件中但忘记将它们放在 config.next.js 文件中，则代码开始出现问题。有没有办法更有效地做到这一点？

我在 package.json 中的脚本：

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "lint": "eslint pages --ext .ts,.tsx,.js",
    "test": "jest",
    "commit": "git-cz",
    "dev:production": "dotenv next"
},

我的 .env 变量

TITULO=react, typescript, material ui App

成分

import { NextPage }          from 'next';
import { FunctionComponent } from 'react';

interface HelloWorldProps {
  nombre: string,
  saludo?: string
}


const HelloWorld: FunctionComponent<HelloWorldProps> = ({ nombre, saludo = 'noches' }: HelloWorldProps) => ( …

我拥有的

import { NextPage } from 'next';
import React from 'react';

interface Props {
  name: string;
  gretting?: string; // Error: ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props) 
}

const Hello: React.FunctionComponent<Props> = ({ name, gretting = 'night' }: Props) =>
  <p>Hi {name} Good {gretting}</p>;

const Home: NextPage = () => <Hello name="Jhon Doe" />;

export default Home;

问题

Eslint react 插件抱怨这个错误ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props)。

根据这个 …

我不太清楚能够在反应本机应用程序中全局处理错误的过程。如何捕获任何应用程序错误并据此做出响应？例如，显示错误屏幕和“回家”按钮，或者运行特定代码（例如重试请求），以便用户可以从此类错误中恢复。使用哪些方法来处理反应原生中的全局错误？

在ReactJs项目中，您可以使用.storybook/preview.js文件添加全局装饰器和参数。如何实现同样的行为@storybook/react-native？

我需要的是用 来包装我所有的故事，ThemeProvider但我发现的独特方式是用 来包装单个故事.addDecorator()。

我想根据一个变量调用不同的钩子...这个值来自URL参数并且是动态的，但是钩子不能根据Hook的规则有条件地运行：

例子

// this hook comes from react-router dom to get the URL params
const param = const { productType, accountId, statementId } = useParams();

// I need to run a hook that calls a different API according productType value
if (productType === 'someType') {
  return useHookOne(accountId, statementId)
} else if (productType === 'otherType') {
  return useHookTwo(accountId, statementId)
} else {
  return useHookThree(accountId, statementId)
}

我想要的是

我试图通过在用户向下滚动时将背景从透明更改为灰色来对反应导航本机堆栈标题进行动画处理。我正在阅读文档，它建议使用 navigation.setOptions与屏幕信息进行交互。

import React from 'react';
import {
  useAnimatedScrollHandler,
  useSharedValue,
} from 'react-native-reanimated';

const MyScreen = ({ navigation }) => {
  const scrollY = useSharedValue(0);
  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (e) => {
      scrollY.value = e.contentOffset.y;
    },
  });


  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerStyle: {
        backgroundColor: scrollY.value > 0 ? 'black' : 'transparent',
      },
      headerTransparent: scrollY.value === 0,
    });
  }, [ navigation, scrollY.value ]);
}