如何在React中使用不同的默认props？

Question

我有一个 React 组件，它从它的 props 接收一个 id。

export type MyComponentProps = {
  id: string
}

export const MyComponent = function(props: MyComponentProps) {
  return (
    <div>{props.id}</div>
  );
}

现在，我想让 id 可选，但我确实需要使用标识符，所以我将 id 设为可选并添加默认属性。

import { v4 } from 'uuid';

export type MyComponentProps = {
  id?: string
}

export const MyComponent = function(props: MyComponentProps) {
  return (
    <div>{props.id}</div>
  );
}

MyComponent.defaultProps = {
  id: `MyComponent-${v4()}`
}

完成！但现在，如果我渲染 2 个不同的 MyComponent 实例，它们将具有相同的 id。我该如何解决这个问题？我所做的如下，但我不是反应专家，我不知道是否还有其他方法可以完成此任务。

import { v4 } from 'uuid';

export type MyComponentProps = {
  id?: string
}

export const MyComponent = function(props: MyComponentProps) {
  const id = props.id?? `MyComponent-${v4()}`;
  return (
    <div>{id}</div>
  );
}

Answer 1

如果您希望每个组件的 ID 在渲染之间保持不变，则需要将其置于状态中。

export const MyComponent = function(props: MyComponentProps) {
  const [defaultId] = useState(v4)
  const id = props.id ?? defaultId
  return (
    <div>{id}</div>
  );
}

Answer 2

从技术上讲，可以通过实现 HOC 来使用柯里化来缓存值。

基本实现如下所示：

import { useRef } from "react";
import { v4 as uuidv4 } from "uuid";

const withId = (Component: React.FC) => ({ children, ...props }) => {
    const id = useRef(uuidv4).current;
    return <Component {...props} id={id} />;
}

const ComponentWithId = withId(Component);

/* Usage */
interface WithId {
    id: string;
}

interface Props extends WithId {}

const Component = ({ id }: Props) => {
    return <div id={id}>Some content</div>;
}