Question

我正在尝试使用挂钩将此类组件转换为功能组件

import React, { Component, cloneElement } from 'react';

class Dialog extends Component {
    constructor(props) {
        super(props);
        this.id = uuid();       
   }
   render(){
     return ( <div>Hello Dialog</div> );
  }
}

此组件以特定的ID启动，因为我可能不得不使用它们的多个实例。如果使用功能组件，该如何实现？

Answer 1

一种解决方案是使用useEffect在第一个渲染器上创建您的ID，并将其存储在状态中：

const Dialog = () => {
    const [id, setId] = useState(null);

    useEffect(() => {
        setId(uuid())
    }, [])

    return <div>Hello Dialog</div>
}

将空数组作为useEffect的第二个参数将使其无法多次触发。

但是另一个非常简单的解决方案可能是...在组件外部创建它：

const id = uuid();

const Dialog = () => {
    return <div>Hello Dialog</div>
}

Answer 2

您可以将其存储在以下状态：

const [id] = useState(uuid()); // uuid will be called in every render but only the first one will be used for initiation 

// or using lazy initial state
const [id] = useState(() => uuid()); // uuid will only be called once for initiation

您也可以将其存储在React ref中：

const id = useRef(null);
if(!id.current) {
    // initialise 
    id.current = uuid();
}
// To access it’s value
console.log(id.current);

Answer 3

几乎所有实例属性都成为引用，在这种情况下，您将访问idRef.current作为ID

function Dialog() {
  const idRef = useRef(uuid())
  return <div>Hello Dialog</div>
}

Answer 4

谢谢大家，您的解决方案效果很好。我也尝试了这种解决方案，但我也觉得很好：用this.id替换Dialog.id。这种解决方案有什么缺点吗？

使用钩子将类组件转换为功能组件

4 个答案: