1. ホーム
  2. javascript

[解決済み] Reactコンポーネントに条件付きで属性を追加するにはどうすればよいですか?

2022-03-18 23:32:17

質問

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

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

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

(パースエラー:予期しない識別子)。

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

解決方法は?

どうやら、特定の属性については、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 DOMProperty.js ファイルを作成します。