Преобразование компонента класса в функциональные компоненты с помощью хуков - PullRequest
Новая
       3

Преобразование компонента класса в функциональные компоненты с помощью хуков

1 голос
/ 12 июля 2020
• 1000 Как я могу этого добиться, если использую функциональный компонент?

Ответы [ 4 ]

5 голосов
/ 12 июля 2020

Одним из решений было бы использовать useEffect для создания вашего идентификатора при первом рендеринге и сохранить его в состоянии: 

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>
}
3 голосов
/ 12 июля 2020

Вы можете сохранить его в состоянии: 

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);
1 голос
/ 17 июля 2020

Всем спасибо, ваши решения работают хорошо. Я также пробую это решение, и оно мне тоже подходит: замените this.id на Dialog.id. Есть ли у этого решения недостатки?

0 голосов
/ 12 июля 2020

Любое свойство экземпляра в значительной степени становится ссылкой, и вы получите доступ к idRef.current в этом случае для идентификатора 

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