我正在尝试使用钩子将此类组件转换为功能组件
import React, { Component, cloneElement } from 'react';
class Dialog extends Component {
constructor(props) {
super(props);
this.id = uuid();
}
render(){
return ( <div>Hello Dialog</div> );
}
}
这个组件是用一个特定的 ID 启动的，因为我可能不得不使用它们的多个实例。如果我使用功能组件，我该如何实现？
一种解决方案是useEffect在第一次渲染时使用创建您的 ID，并将其存储在 state 中：
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>
}
您可以将其存储在状态：
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);
任何实例属性几乎都变成了 ref，idRef.current在这种情况下，您可以访问id
function Dialog() {
const idRef = useRef(uuid())
return <div>Hello Dialog</div>
}
谢谢大家，您的解决方案效果很好。我也尝试了这个解决方案，我发现它也不错：替换this.id为Dialog.id. 这个解决方案有什么缺点吗？