☰

React コンポーネントに条件付きで属性を追加するにはどうすればよいですか? 質問する

tag-icon • tag-icon javascript reactjs
React コンポーネントに条件付きで属性を追加するにはどうすればよいですか? 質問する

特定の条件が満たされた場合にのみ、React コンポーネントに属性を追加する方法はありますか?

readOnly="false"レンダリング後の Ajax 呼び出しに基づいて、フォーム要素に required 属性と readOnly 属性を追加することになっていますが、属性を完全に省略するのと同じではないため、これを解決する方法がわかりません。

以下の例は私が望んでいることを説明しているはずですが、うまくいきません。

(解析エラー: 予期しない識別子)

function MyInput({isRequired}) {
  return <input classname="foo" {isRequired ? "required" : ""} />
}

ベストアンサー1

どうやら、特定の属性については、渡された値が真実でない場合は、React は属性を省略できるほどインテリジェントです。例:

const InputComponent = function() {
    const required = true;
    const disabled = false;

    return (
        <input type="text" disabled={disabled} required={required} />
    );
}

結果は次のようになります:

<input type="text" required>

更新:なぜこのようなことが起こるのか知りたい人は、ReactDOMのソースコード、具体的には次の行で詳細を確認してください。30そして167のDOMプロパティファイル。

おすすめ記事