Question

我有这个组件，在某些情况下我想提供value和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 />组件，所以这段代码变得非常笨重。有没有什么办法可以在组件道具中使用? :视图逻辑而不是外部？

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的代码我发现通过将三元运算符的else条件设置为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} />

如何使用视图逻辑来确定组件的道具

2 个答案: