ビューロジックを使用してコンポーネントの小道具を決定する方法

Question

場合によっては、とonChangeの支柱を、特にid propがコンポーネントに渡されたときに与えるこのコンポーネントがあります。

<TextField 
    hintText="Recipe Name" 
    ref={r => this.recipeName = r} 
    {this.props.id ? 'value={this.state.name}' : ''} 
    {this.props.id ? 'onChange={this.handleNameChange}' : ''} /> 

ただし、このコードを使用するとこのエラーが発生します。

BabelLoaderError: SyntaxError: Unexpected token (71:13) 

    69 |    hintText="Recipe Name" 
    70 |    ref={r => this.recipeName = r} 
> 71 |    {this.props.id ? 'value={this.state.name}' : ''} 
    |   ^
    72 |    {this.props.id ? 'onChange={this.handleNameChange}' : ''} /> 

私はちょうどコンポーネントの外にビューロジックを置くことは、このように、正常に動作します知っている：

{ this.props.id ? 
    <TextField 
     hintText="Recipe Name" 
     ref={r => this.recipeName = r} 
     value={this.state.name} 
     onChange={this.handleNameChange}/> : 
     <TextField 
     hintText="Recipe Name" 
     ref={r => this.recipeName = r} /> 
} 

しかし、私は、複数の<TextField />のコンポーネントを使用していますので、このコードは本当に不格好になっています。外部の代わりにコンポーネントの小道具内で? :ビューロジックを使用する方法はありますか？ Ahmmedのコードをいじり

Answer 1

あなたは以下のようにそれを試して、

<TextField 
    hintText="Recipe Name" 
    ref={r => this.recipeName = r} 
    value = {this.props.id ? this.state.name : undefined} // no need to use curly braces inside another curly brace 
    onChange = {this.props.id ? this.handleNameChange : undefined} 
/> 

Answer 2

私は小道具がvalueとonChange値かのようundefinedにterniaryオペレータの他の条件を設定することにより、それがなることが分かりました決して設定されませんでした。このコードは、すべてのエラーをスローし、私のタイピングをたくさん保存されていません：

<TextField 
     hintText="Recipe Name" 
     ref={r => this.recipeName = r} 
     value = {this.props.id ? this.state.name : undefined} 
     onChange = {this.props.id ? this.handleNameChange : undefined} />