Как использовать логику представления для определения реквизита компонента

Question

У меня есть этот компонент, который в некоторых случаях я хочу дать value и опору onChange, в частности, когда компонент опознавания передается компоненту.

<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 /> компоненты, этот код становится очень неуклюжим. Есть ли способ, которым я мог бы использовать логику вида ? : внутри реквизитов компонентов вместо внешнего?

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

Мессинг вокруг с кодом Ahmmed я обнаружил, что, установив условие еще в terniary оператора undefined, было бы, как если бы проп значения value и onChange никогда не были установлены. Этот код не бросает все ошибки и спас меня много печатать:

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