嵌套if语句jsx

时间:2017-07-28 14:36:41

标签: javascript reactjs

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

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



  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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

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

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

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

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