如何在函数返回HTML标签后将HTML注入React JSX

Question

我有一个在表单提交时调用的函数。该函数根据Axios POST请求的回调返回一个段落标记。

我如何将这个段落标签注入到我的页面中，以便它在DOM中显示?我确信这很简单，但我只是在挣扎什么是最好的方法来做到这一点

功能:

axios({
method: "POST",
data: {
username: registerUsername,
email: registerEmail,
password: registerPassword,
},
withCredentials: true,
url: "http://localhost:4000/register",
})
.then((res) => {
if (res.data === "Username already exists") {
return (
<p className="text-sm text-red-600">Username already exists</p>
);
} else {
<p className="text-sm text-red-600">Account registered</p>;
}
})
.catch((err) => console.log(err));
};

形式:

<form onSubmit={handleSubmit(onSubmitHandler)}>
<label className="font-semibold">Username</label>
<input
placeholder="Username"
name="username"
className="block border border-grey-light w-full p-3 rounded mb-4"
onChange={(e) => setRegisterUsername(e.target.value)}
{...register("username", {
required: "An username is required",
})}
></input>
<p className="text-sm text-red-600">
{errors?.username && errors.username.message}
</p>
<label className="font-semibold">Email</label>
<input
placeholder="E-mail"
name="email"
className="block border border-grey-light w-full p-3 rounded mb-4"
onChange={(e) => setRegisterEmail(e.target.value)}
{...register("email", {
required: "Please enter a valid e-mail",
})}
></input>
<p className="text-sm text-red-600">
{errors?.email && errors.email.message}
</p>
<label className="font-semibold">Password</label>
<input
placeholder="Password"
type="password"
name="password"
className="block border border-grey-light w-full p-3 rounded mb-4"
onChange={(e) => setRegisterPassword(e.target.value)}
{...register("password", {
required: "Password must be min 8 or max 24 characters",
min: 8,
max: 24,
})}
></input>
<p className="text-sm text-red-600">
{errors?.password && errors.password.message}
</p>
<label className="font-semibold">Confirm Password</label>
<input
placeholder="Confirm Password"
type="password"
name="confirmPassword"
id="password"
className="block border border-grey-light w-full p-3 rounded mb-4"
{...register("confirmPassword")}
onChange={(e) => setRegisterUsername(e.target.value)}
></input>
<p className="text-sm text-red-600">
{errors?.confirmPassword && errors.confirmPassword.message}
</p>
<button
// onClick={submitRegistration}
type="submit"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
>
Create Account
</button>
</form>

Answer 1

useState

const [error,setError]=useState("")

功能:

axios({
method: "POST",
data: {
username: registerUsername,
email: registerEmail,
password: registerPassword,
},
withCredentials: true,
url: "http://localhost:4000/register",
})
.then((res) => {
if (res.data === "Username already exists") {
return (
setError("Username already exists")//Change here
);
} else {
setError("Account registered")//Change here
}
})
.catch((err) => console.log(err));

};

形式:

<form onSubmit={handleSubmit(onSubmitHandler)}>
{error &&  <p className="text-sm text-red-600">{error}</p>}
</form>