Question

我的代码看起来像是

<iOSOnlyComponent>
.....
.....
.....
</iOSOnlyComponent>

只想在iOS上使用iOSOnlyComponent。我试过这个

{isIOS && <iOSOnlyComponent>}
.....
.....
.....
{isIOS && </iOSOnlyComponent>}

但是我遇到了语法错误

Answer 1

你应该做（像未经测试的代码）

 render() {
    const helloMessageIOS = <iOSOnlyComponent> Hello, JSX! </iOSOnlyComponent>;
  return (
    <ScrollView >
       {isIOS  && helloMessageIOS   }
    </ScrollView >
  );
}

如果iOSOnlyComponent组件很大，您只需将其添加到函数中并从那里返回。

可能如下（未经测试的代码）

render() {
    return (
    <View >
       {isIOS  && {this.displayComponent()}   }
    </View >
  );
}


displayComponent() {
   return <iOSOnlyComponent> Hello, JSX! </iOSOnlyComponent>;
}

Answer 2

使用条件渲染。

 renderIosComp(){
    if(isIOS){   //use your variable here ideally props or state should be used
      return(<iOSOnlyComponent>
              .........
             ..........
            <iOSOnlyComponent />);
    }
    else{
         return(<div></div>);
    }
 }

在你的渲染方法中调用它

render(){
   return(<div>  
         .......
         ......
          {this.renderIosComp()}
          </div>);
}

Answer 3

如果条件渲染使您的组件过于复杂，您只需将其分为2个文件，将其命名为myComponent.android.js和myComponent.ios.js，然后只需import myComponent from './myComponent'

React将自动选择正确的文件。

如何有条件地添加反应中的组分

3 个答案: