web-dev-qa-db-ja.com

Reactインライン条件コンポーネント属性

私はあらゆる場所を検索してきましたが、私の質問に対する答えが見つかりません。だから私は特定の条件でのみ表示される条件付き属性が必要です、例：

<Button {this.state.view === 'default' && 'active'}></Button>

ご覧のとおり、this.state.viewがdefaultに等しい場合は、ボタンactiveのみを示します。ただし、Unexpected token, error...が表示されます

しかし、その前に属性を配置しようとすると、たとえば：

<Button isActive={this.state.view === 'default' && 'active'}></Button>

構文エラーを通過して正常に表示されますが、これは私が達成したかったことではありません。

どうすれば修正できますか？そして、それが通らない理由は何でしょうか？

更新

だから私はreact-bootstrapでプロパティactiveがactive=trueの省略形であることを見つけたので、

<Button active={this.state.view === 'default'}></Button>

だから、誰かがこの問題に遭遇した場合、私はここに残します。ただし、条件付き属性が、propのような構文で囲まずに失敗している理由を知りたいのですが、例：

この：

active={this.state.view === 'default'}

Versus

{this.state.view === 'default' && 'active'}
javascriptreactjsjsxreact-bootstrap
8
JohnnyQ

まず第一に、JSXは _React.createElement_ の構文糖にすぎません。したがって、それはのように見えるかもしれませんが、実際には、_html attributes_：実際、常にpropsを渡します。

たとえば、JSXコード_<input type="button" value="My button" />_はReact.createElement('input',{type:'button',value:'My Button'})に変換されます。そして、必要に応じて、Reactエンジンはこの_React Element_をHTML要素としてDOMにレンダリングします。

つまり、JSXはtrueのように値なしでpropをトランスパイリングします（-- docs を確認）。たとえば、_<Button active></Button>_はReact.createElement(Button, { active: true });に変換されます。

ただし、HTML5仕様が受け入れられないことはわかっています_attribute=true_（指摘された here ）。たとえば、_<button disabled=true></button>_は無効です。正しいのは_<button disabled></button>_です。

したがって、HTML要素をDOMにレンダリングするために、Reactは有効なpropsのみを考慮しますattributes（そうでない場合、属性はレンダリングされません）。 サポートされているすべてのHTML属性 。そして、最後に、ブール属性の場合、true/false値。適切にレンダリングされます。

例：_<button active={true}></button>_がReact.createElement("button", { active: true });に変換され、次にReactがDOMにレンダリングされます__<button></button>_、activeがないため_<button/>_タグのHTML仕様の属性（サポートされている属性リストにはありません）。

ただし、_<button disabled={true}></button>_はReact.createElement("button", { disabled: true });に変換され、ReactはDOMにレンダリングされます_<button disabled></button>_。

私はあなたのケースを明確にするためにそれを言ったばかりです。

activeプロップをButtonコンポーネントに渡そうとしています（最初の大文字は、Reactコンポーネントであることを意味します：React Buttonというコンポーネントがコードのどこかで処理されました）。

つまり：

_<Button active></Button>_はReact.createElement(Button, { active: true });に変換されます

そして

_<Button active={true}></Button>_はReact.createElement(Button, { active: true });に変換されます

同じことです！

したがって、条件付きpropを実行する場合は、次のようにするだけです。

_<Button active={this.state.view === 'default'}></Button>
_

括弧内に条件があります。つまり、_this.state.view_がdefault（true）に等しい場合、activeプロップはtrue値を持つコンポーネントに渡されます。等しくない場合は、false値を使用します。

Buttonコンポーネントは、このactiveプロップを何らかの方法で処理する必要があります。 button要素をレンダリングして、たとえば、スタイルを変更し、disabledプロパティを渡すことができます...これを示すためにフィドルを作成しました： https：// jsfiddle。 net/mrlew/5rsx40gu /

21
mrlew

実際、私は this link で前に答えた質問と重複していると思います。この特定の投稿では、ブール値の条件プロップは必要ありません。次のように機能するためです。

const { booleanValue } = this.props;
return (
    <input checked={booleanValue} />
);

または、独自のブール値を作成します。

const booleanValue = someThing === someOtherThing;
return (
    <input checked={booleanValue} />
);

booleanValueがfalseである場合、reactはactiveプロパティを認識しないため、どちらも正常に機能します。 checked propを特定のコンポーネントに渡し、コンポーネントがthis.props。

しかし、条件付きの特定のコンポーネントにプロップを置きたい場合で、条件がfalseを返す場合は、2つの方法があります。 、私は2番目が好きです：

最初：

<Component someProp={condition ? yourValue : undefined} />

第二：

<Component {...(condition && { someProp: yourValue })} />
5
AmerllicA

JSXでは、コンポーネントプロパティ（またはprops）は、プレーンなJavaScriptオブジェクトにコンパイルされます。プロップ名はオブジェクトのキーとして使用され、プロップ値はそれらのキーの下に保存されます。 JSXドキュメントの最初の例 は、これを実証するのに非常に優れています。あなたの場合、{view === 'default' && true}はプロップ名が関連付けられていない生の値です。キーとして使用するプロップ名（構文name=で指定）がない場合、JSXはその値を最終的なプロップオブジェクトに配置する場所がありません。

ただし、中括弧内の式がオブジェクトに評価される場合、JSXは元の構文を介して小道具を受け入れます。たとえば、{{ active: view === "default" }}を実行できます。この場合、JSXは提供されたオブジェクトから必要なキーと値の両方を取得できるため、active=は必要ありません。

2
Elliot