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

Question

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

向导输入正在将 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

尝试

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

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

use two conditions to render html in React

javascript

reactjs

react-hook-form