Question

尝试在jsx中执行嵌套的if语句或if else if语句。基本上如果有1个输入它有标签Primary，如果有2个输入，第一个有标签primary，第二个有Secondary标签，如果有2个以上，则第一个标签为Primary，第二个标签为Secondary 3前进没有标签。

目前我的代码将标签Primary放在第一个，Secondary放在第二个，但是一旦我添加第三个，它就会删除所有标签。任何想法都会很棒。

＆＃13;

  render() {
    const { lowerType, currentPerson, contact, index, type } = this.props;
    const isPrimary = index === currentPerson.getIn(['primaries', lowerType]);
    // const secondaryLabel = <label><b>Secondary</b></label>;
    const label = <label><b>{ isPrimary ? 'Primary' : 'Secondary' }</b></label>;
    return (
      <div className='field main-item'>
        { currentPerson.get(`${lowerType}s`).size <= 2 && label }
        <Input
          value={contact}
          onChange={this.handleInputChange}
          placeholder={`Enter ${type === 'Email' ? 'an' : 'a'} ${type.toLowerCase()}`}
          type={type === 'Email' ? 'text' : 'tel'}
          style={inputRight}
        />
      </div>
    );
  }

＆＃13;

Answer 1

您使用的是以下条件，仅当currentPerson.get（${lowerType}s）。size小于或等于2时，才会返回标签。

{ currentPerson.get(`${lowerType}s`).size <= 2 && label }

如果您不想删除标签或提供其他文字，最好不要使用&&而是使用tertiary运营商。

{ currentPerson.get(`${lowerType}s`).size <= 2 ? label : 'third label' }

嵌套if语句jsx

1 个答案: