Question

嗨，我发现很难在React中添加if语句。当我添加if语句时，它显示编译错误。下面是我的代码。

<div class="container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:red;"></path>
  </svg>
</div>

我只想在isDrodpownShown为true时显示SelectwithMargin storeFilter。因此，我尝试添加以下if条件。

 {parametersSearchResults.length > 0 && [
            <ButtonWithMargin
              key="filter"
              label="Filter"
              id="filter"
              icon={
                this.state.filterMegaDropdownOpen ? (
                  <ArrowDropUp />
                ) : (
                  <ArrowDropDown />
                )
              }
              name={
                this.state.filterMegaDropdownOpen
                  ? 'filterExpanded'
                  : 'filterCollapsed'
              }
              iconOnRight
              onClick={this.toggleFilterMegaDropdown}
              width="80"
            />,
            <Button
              key="edit"
              label="Edit Parameters"
              icon={<Edit />}
              onClick={openEditParametersModal}
              disabled={selectedIndexes.length === 0}
            />,
            <SelectWithMargin
              instanceId="storeFilter"
              Value={{ label: 'Current', value: true }}
              onChange={this.handleChange}
              options={options}
              placeholder="Store"
            />,
        ]}

以上代码在&&附近引发语法错误。我可以知道在react组件中添加if语句的正确方法是什么。任何帮助，将不胜感激。谢谢

Answer 1

尝试一下。

getDropDown = (isDropDownShown) => {
   if(isDropDownShown){
       return (<SelectWithMargin
              instanceId="storeFilter"
              Value={{ label: 'Current', value: true }}
              onChange={this.handleChange}
              options={options}
              placeholder="Store"
            />);
   }else{
     return (<div></div>);
   }
}


{ this.getDropDown(isDropDownShown) }

无法在反应中添加if语句

1 个答案: