Я начинающий используя hooks, но то, что я хочу сделать, - это, дав ему click в кнопке функции Home, что я развернул контент Contact или Контакта, который был бы просто Youre in Contact и Have в good day!!! Это мой код примера, я надеюсь, что он помогает.
Import React, { useState } from ‘react’;
function Contact() {
return(
<h2>Yore in Contact</h2>
<p>Have a good day !!!</p>
);
}
function Home() {
const contact = useState(new Contact())
return(
<h2>Youre in Home</h2>
<button onClick={contact}>Goto Contact</button>
);
}
Пробуй с этим, есть ошибки в твоих hooks, так как ты не можешь renderizar два элемента без того, чтобы у них был отец, можешь помещать элементы внутри div, или в этом случае внутри Fragment "<> элементы... </>"
import React, { useState } from 'react';
function Contact() {
return(
<>
<h2>Yore in Contact</h2>
<p>Have a good day !!!</p>
</>
);
}
function Home() {
const [contact,setContact] = useState(null);
return(
<>
<h2>Youre in Home</h2>
<button
onClick={
() => setContact(contact === null ? <Contact /> : null)}
>
Goto Contact
</button>
{contact}
</>
);
}
Другой выбор в ответ @Brandon был бы этим:
function Home() {
const [contact, setContact] = useState(false);
return(
<>
<h2>Youre in Home</h2>
<button
onClick={() => setContact(true)}
>
Goto Contact
</button>
{contact && <Contact />}
</>
);
}
В этом примере, state contact
был бы флагом, что, если - истинный образец компонент <Contact />
.