在React中使用两个条件来渲染html

Question

我正在尝试根据一个条件是否有两个值来呈现htmldiv。

向导输入正在将responseType变量更改为"textMessage"或";textToSpeech"。不确定我做的条件是否正确…

const stepOne = () => {

const responseType = watch("responseType")

return (
<WizardInput
type="radio"
id="textMessage"
checked={upload?.responseType === "textMessage"}
tag={CustomInput}
onChange={({ target }) => {
handleInputChange(target);
}}
innerRef={register({
required: "Add your message silly goose"
})}
value="textMessage"
name="responseType"
errors={errors}
/>
<WizardInput
type="radio"
id="textToSpeech"
checked={upload?.responseType === "textToSpeech"}
tag={CustomInput}
onChange={({ target }) => {
handleInputChange(target);
}}
innerRef={register()}
value="textToSpeech"
name="responseType"
errors={errors}
/>
// trying to render this h5 if textMessage OR textToSpeech
{ responseType === "textMessage" || "textToSpeech" && (
<div>
<h5>This here</h5>
</div>
)}
)}

Answer 1

您需要再次检查相等性。

(responseType === "textMessage" || responseType === "textToSpeech") && (
<div>
<h5>This here</h5>
</div>
)

Answer 2

Try

(responseType === "textMessage" || responseType === "textToSpeech") && (<div>...</div>)