标签: react-functional-component

我正在学习 TypeScript，有些东西让我感到困惑。一位如下：

interface Props {
  name: string;
}

const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

const PrintName2 = (props: Props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

对于上面的两个功能组件，我看到 TypeScript 生成了相同的 JS 代码。PrintName2就可读性而言，该组件对我来说似乎更加精简。我想知道这两个定义之间有什么区别，是否有人在使用第二种类型的 React 组件？

我试图从父组件调用子组件方法，我试图使用 useRef。将来，SayHi 方法将更新子组件中的钩子状​​态。不幸的是，我有无法处理的错误。

行：ref.current.SayHi();

类型“ForwardRefExoticComponent<{ name: string;”上不存在属性“SayHi” } & RefAttributes<{ SayHi: () => void; }>>'。

行：< Child name="Adam" ref={ref}/>

输入'RefObject void; }>>>' 不能分配给类型 '((instance: { SayHi: () => void; } | null) => void) | RefObject<{ SayHi: () => void; }> | 空| 不明确的'。输入'RefObject void; }>>>' 不能分配给类型 'RefObject<{ SayHi: () => void; }>'。“ForwardRefExoticComponent<{ name: string;”类型中缺少“SayHi”属性 } & RefAttributes<{ SayHi: () => void; }>>' 但在类型 '{ SayHi: () => void; 中是必需的; }'。

完整的 test.tsx 文件：

import React, { useRef, …

我为警报框编写了以下钩子：

import MuiAlert from '@material-ui/lab/Alert';
import { Snackbar } from '@material-ui/core';
import React from 'react';

export const useAlert = () => {
    const [open, setOpen] = React.useState(false);
    const [message, setMessage] = React.useState('');

    const openAlert = (message) => {
        setOpen(true);
        setMessage(message);
    };

    const closeAlert = (event, reason) => {    
        setOpen(false);
    };

    return {
        openAlert,
        Alert: <Snackbar open={open} onClose={closeAlert}><MuiAlert onClose={closeAlert}>{ message }</MuiAlert></Snackbar>
    };
};

我将此钩子集成到其他功能组件中，如下所示：

import { useAlert } from './useAlert';

const Dashboard = () => {
    const { openAlert, Alert } …

我收到错误“未捕获的 ReferenceError：未定义 regeneratorRuntime”。请帮我找出错误以及如何解决它。

我知道，在React Hooks出现之后，函数式组件几乎可以像类组件一样发挥作用，并且最近我看到了使用函数式组件的鼓励浪潮。

我的问题是，拥有一个包含一些功能组件和一些类组件的混合反应应用程序会以任何方式造成伤害吗？我知道反应不会抱怨它，但我正在寻找经验丰富的最佳实践，组件类型不一致是否会导致任何问题？

任何提示表示赞赏。

我正在尝试创建一个带有可排序列的DetailsList（类似于此处文档中的示例： https: //uifabric.azurewebsites.net/#/controls/web/detailslist），但我想使用而不是类组件功能组件和钩子。

问题在于，当执行 onColumnClick 函数时，“items”数组仍然为空。

这基本上是我的组件的设置：

const MyList= () => {
  const [items, setItems] = useState([]);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    const newItems = someFetchFunction()
    setItems(newItems);

    const newColumns= [
      {
        key: "column1",
        name: "Name",
        fieldName: "name",
        onColumnClick: handleColumnClick,
      },
      {
        key: "column2",
        name: "Age",
        fieldName: "age",
        onColumnClick: handleColumnClick,
      },
    ];
    setColumns(newColumns);
  }, []);

  const handleColumnClick = (ev, column) => {
    console.log(items); // This returns [] instead of a populated array.
  };

  return <DetailsList items={items} columns={columns} …

我有InputField 组件，它接受各种道具，如类型、占位符、值等。我正在尝试使用InputField 组件创建一个表单。我可以轻松地从表单传递道具，但无法将输入值保存到我的状态中。这是我的代码。

输入字段.js

import React, { useState } from "react";

const InputField = ({ value, label, placeholder, type, onChange }) => {
  const handleChange = (e) => {
    const { value } = e.target;
    onChange(value);
  };

  return (
    <div className="form-group">
      {label && <label htmlFor="input-field">{label}</label>}
      <input
        type={type}
        value={value}
        className="form-control"
        placeholder={placeholder}
        onChange={handleChange}
      />
    </div>
  );
};

export default InputField;

添加产品表单.js

import React, { useState } from "react";
import { Form, Button } from "reactstrap";
import InputField from "../UI/InputField";

const AddProductForm = …

我正在创建一个可重用的组件按钮，我想将两个 Tailwind 类作为道具传递给该按钮并动态使用它们。

这是我的组件：

function Button({ primary, secondry, label, onClick }) {
  return (
    <button
      onClick={(e) => onClick(e)}
      className={`bg-${primary} py-0.5 px-3 rounded text-white font-semibold text-xl border-2 border-${primary} hover:bg-${secondry} hover:text-${primary} cursor-pointer duration-300`}
    >
      {label}
    </button>
  );
}

这就是我使用该组件的方式：

<Button
label={"Cancel"}
primary="red-700"
secondry="zinc-900"
onClick={(e) => navigate("/customers")}
/>

然而，这些课程并未被应用。它看起来是这样的：

在这个GitHub问题中，我基本上建议更改：

x = useCallback( ... , []);

至：

x = useRef( ... ).current;

两者相同，但是使用useRefReact不会比较依赖关系。

为此，有一个问题的答复：

有没有一种情况，没有依赖的useMemo或useCallback比useRef更好的选择？

我想不出一个，但我可能忽略了一些用例。

那么有人能想到这种情况吗？

鉴于这种

type LocationWeather = {
  name: string;
  temperature: number;
};

type IndexProp = {
  savedLocationsWeather: LocationWeather[];
  favoriteLocationWeather: LocationWeather;
};


function Index({ savedLocationsWeather, favoriteLocationWeather }: IndexProp)

文档应该是什么样的？

我的第一个方法是：

/**
 * Home page displaying weather details of saved locations and favorite location
 * @param {object} props Component props
 * @param {LocationWeather[]} props.savedLocationsWeather Weather details of saved locations
 * @param {LocationWeather} props.favoriteLocationWeather Weather details of favorite location
 * @return {TSX.Element}
 */

但：

1. 我不确定这是否是指定 savingLocationsWeather 的数组类型的正确方法，如

   * @param {Array} props.savedLocationsWeather Weather details of saved …