相关疑难解决方法(0)

我想在我的React Native应用程序中添加一些仅调试的UI,但我在JavaScript环境中找不到任何等效的RCT_DEBUG或RCT_DEV编译时标志.有吗？

使用案例:我想添加一个状态栏,显示我的应用程序发起的HTTP请求数.显然这不是一个发货应用程序的一部分,但它可以帮助我在开发和测试中检查我的工作.

我将使用angular来做出反应,我正试图找出一个很好的反应替代angular的ng-if指令,我在这里渲染或根据条件渲染元素.以此代码为例.我正在使用打字稿(tsx)顺便说一句,但这应该不重要.

"use strict";

import * as React from 'react';

interface MyProps {showMe: Boolean}
interface MyState {}

class Button extends React.Component <MyProps, MyState>{
  constructor(props){
    super(props);
    this.state = {};
  }

  render(){
    let button;
    if (this.props.showMe === true){
       button = (
        <button type="submit" className="btn nav-btn-red">SIGN UP</button>
      )
    } else {
      button = null;
    }
    return button;

}
}
export default Button;

这个解决方案有效,但是还有另一种通常用于实现这种效果的方法吗？我只是在猜测

我在React文档中读到"if"类​​型语句不能在JSX代码中使用,因为JSX呈现为javascript的方式,它并没有像人们期望的那样工作.

但有没有理由为什么实现"if"组件是一个坏主意？它似乎从我最初的测试中运行良好,让我想知道为什么不经常这样做？

我的部分目的是尽可能地让反应开发,基于标记 - 尽可能少的javascript.对我而言,这种方法更像是一种"数据驱动"方法.

你可以在这里查看JS Fiddle

<script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/JSXTransformer.js"></script>
<script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/react-with-addons.js"></script>

<script type="text/jsx">
/** @jsx React.DOM */
    
var If = React.createClass({
  displayName: 'If',

  render: function()
  {
    if (this.props.condition)
      return <span>{this.props.children}</span>
    return null;
  }
});

var Main = React.createClass({
    render: function() {
        return (
           <div>
             <If condition={false}>
                <div>Never showing false item</div>
             </If>
             <If condition={true}>
                <div>Showing true item</div>
             </If>
          </div>
        );
    }
});

React.renderComponent(<Main/>, document.body);
</script>

运行以上结果:

显示真实的项目