意识到React Native应用旨在使用模拟器进行开发/测试，是否有可能使用Web浏览器来测试应用？

存在诸如[https://rnplay.org/]之类的服务，但是我担心的是，该服务由[https://appetize.io/]提供支持，可能会受到每月分钟数的限制。 与付费屏幕流媒体服务相比，我还想利用免费/开源技术来实现这一目标。

沿着这些思路，为了在浏览器中测试该应用程序，是否要求该应用程序使用一个或多个库，以允许该应用程序既可以在React Native中运行，也可以在React中运行？ 我想找到一种替代此特定方法的方法，因为我想专门为React Native编写代码。

有什么方法可以在Visual Studio Code中使用组件或HTML补全吗？ 因为当我们有Bootstrap等类时，手动键入每个字母不是一个好主意。例如，如Emmet中的完成：ul>li*2>a

var React = require('react');

var Header = React.createClass({
    render: function () {
        return (

            <nav className="navbar navbar-defaullt">
                <div className="container-fluid">
                    <a href="/" className="navbar-brand">
                        <img width="50" height="50" src="images/logo.png" alt="logo" />
                    </a>
                    <ul className="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/#about">About</a></li>
                    </ul>
                </div>
            </nav>

                );
                }
                });
module.exports  = Header;

我是使用React进行开发的新手。

有人可以列出使用ReactJS的优缺点。对于大型项目使用此库是否存在任何性能问题。

好的，所以我们现在可能已经从Google听说过AMP HTML。

我很好奇的是，这将如何适合我们现有的工作流程。 如果您正在编写React或Angular应用，那么AMP HTML在开发过程中如何适应？ 这些框架中的每一个都已经有一种定义组件的方法，并且似乎AMP只是添加到了堆栈中。

我们大多数人已经在使用其他工具，例如browserify或webpack。 我不容易看到AMP如何与其他产品相适应。 其中一些工具已使我们能够以优化的方式为我们的网站提供服务。 AMP HTML将在多大程度上改变所有这些？

objectOf和shape有什么区别？ 在文档中：

// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number)

VS

// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
})

什么时候应该使用objectOf，什么时候应该使用shape？

我已经插入了一个中间件redux-thunk，我想添加另一个redux-logger。

如何配置它，以便我的应用程序同时使用两种中间件？ 我尝试传递[ReduxThunk, logger]的数组，但这没有用。

码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import logger from 'redux-logger';

import App from './components/app';
import reducers from './reducers';
require('./style.scss');

const createStoreWithMiddleware = applyMiddleware(ReduxThunk)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>,
  document.querySelector('#app')
);

我正在使用react.min.js和webpack作为模块捆绑程序编写一个Web应用程序。到目前为止，我的-p代码确实很轻巧，整个文件夹的大小为25 kb。

我从webpack创建的react.min.js是2.2 mb。 使用261457785696551010标志运行优化后，它将捆绑包减小到700kb，这仍然非常大。

我调查了react.min.js文件，它的大小为130kb。

Webpack是否可能产生如此大的文件，或者我做错了什么？

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './public/components/main.jsx',
  output: {
    path: __dirname + "/public",
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }, {
      test: /\.css$/,
      loader: "style!css"
    }]
  }
};

编辑

package.json：

{
  "name": "XChange",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "main": "./bin/www",
  "devDependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "react-dom": "~0.14.3",
    "react": "~0.14.3",
    "webpack": "~1.12.9",
    "babel-loader": "~6.2.0",
    "babel-core": "~6.2.1",
    "babel-preset-react": "~6.1.18",
    "babel-preset-es2015": "~6.1.18",
    "react-bootstrap": "~0.28.1",
    "material-ui": "~0.14.0-rc1",
    "history": "~1.13.1",
    "react-router": "~1.0.2",
    "style-loader": "~0.13.0",
    "css-loader": "~0.18.0"
  },
  "dependencies": {
    "express-validator": "~2.18.0",
    "mongoose": "~4.2.9",
    "kerberos": "~0.0.17",
    "bcrypt": "~0.8.5"
  }
}

我正在将React Router添加到现有项目中。

目前，将模型传递到根组件中，该组件包含用于子导航的导航组件和主要组件。

我发现的React Router的示例只有一个子组件，在不重复两个子组件的情况下改变两个子组件的最佳方法是什么？

Redux文档的第一个原理是：

整个应用程序的状态存储在单个存储中的对象树中。

而且我实际上以为我对所有原则都很了解。但是我现在对应用程序的含义感到困惑。

我理解，如果应用程序仅意味着网站中复杂的小部分之一并且仅用一页即可工作。 但是，如果申请意味着整个网站怎么办？ 我应该使用LocalStorage还是cookie或其他保留状态树的东西？ 但是如果浏览器不支持LocalStorage怎么办？

我想知道开发人员如何保留其状态树！ :)

是否可以在运行时检测当前版本的React是开发版还是生产版？ 我想做这样的事情：

if (React.isDevelopment) {
  // Development thing
} else {
  // Real thing
}

好吧，我受够了尝试。
onEnter={requireAuth()}方法不起作用。 知道为什么吗？

// Authentication "before" filter
function requireAuth(nextState, replace){
  console.log("called"); // => Is not triggered at all 
  if (!isLoggedIn()) {
    replace({
      pathname: '/front'
    })
  }
}

// Render the app
render(
  <Provider store={store}>
      <Router history={history}>
        <App>
          <Switch>
            <Route path="/front" component={Front} />
            <Route path="/home" component={Home} onEnter={requireAuth} />
            <Route exact path="/" component={Home} onEnter={requireAuth} />
            <Route path="*" component={NoMatch} />
          </Switch>
        </App>
      </Router>
  </Provider>,
  document.getElementById("lf-app")

编辑：

当我调用onEnter={requireAuth()}时，将执行该方法，但显然这不是目的，而且我也不会获得所需的参数。

我正在使用Typescript，React和Redux（都在Electron中运行）进行项目，当我将一个基于类的组件包含在另一个组件中并试图在它们之间传递参数时，我遇到了一个问题。 松散地说，容器组件具有以下结构：

class ContainerComponent extends React.Component<any,any> {
  ..
  render() {
    const { propToPass } = this.props;
    ...
    <ChildComponent propToPass={propToPass} />
    ...
  }
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

和子组件：

interface IChildComponentProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps, any> {
  ...
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

显然，我只包括基础知识，这两个类还有很多其他内容，但是当我尝试运行对我来说看起来像是有效代码的代码时，仍然出现错误。 我得到的确切错误：

TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

当我第一次遇到错误时，我以为是因为我没有传入定义道具的接口，但是我创建了该错误（如您在上面看到的），但它仍然无法正常工作。 我想知道，我缺少什么吗？

当我从ContainerComponent中的代码中排除ChildComponent属性时，它呈现的很好（除了我的ChildComponent没有关键属性），但在JSX Typescript中使用它拒绝编译它。 我认为这可能与基于本文的连接包装有关，但是该文章中的问题出现在index.tsx文件中，并且是提供程序的问题，我在其他地方也遇到了问题。

我有一个项目，我两个星期都没碰过。 我将其取回，现在当我尝试运行npm start时出现此错误。

> react-scripts start

sh: react-scripts: command not found

npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.7.0
npm ERR! npm  v3.10.3
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! UpScore@0.6.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the UpScore@0.6.0 start script 'react-scripts start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the UpScore package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     react-scripts start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs UpScore
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls UpScore
npm ERR! There is likely additional logging output above.

• 节点6.7.0
• npm 3.10.3
• mac sierra 10.12

的package.json

{
  "name": "UpScore",
  "version": "0.6.0",
  "private": true,
  "devDependencies": {
    "react-addons-test-utils": "^15.3.1",
    "react-scripts": "0.4.1",
    "react-test-renderer": "^15.3.1",
    "redux-logger": "^2.6.1"
  },
  "dependencies": {
    "@yoshokatana/medium-button": "^1.1.0",
    "axios": "^0.14.0",
    "bcrypt": "^0.8.7",
    "bcrypt-nodejs": "0.0.3",
    "bcryptjs": "^2.3.0",
    "body-parser": "^1.15.2",
    "connect-flash": "^0.1.1",
    "cookie-parser": "^1.4.3",
    "draft-js": "^0.8.1",
    "draft-js-editor": "^1.7.2",
    "draft-js-export-html": "^0.4.0",
    "ejs": "^2.5.2",
    "email-verification": "^0.4.5",
    "express": "^4.14.0",
    "express-session": "^1.14.1",
    "flexboxgrid": "^6.3.1",
    "highlight.js": "^9.6.0",
    "immutable": "^3.8.1",
    "katex": "^0.6.0",
    "lodash": "^4.15.0",
    "markdown-it-mathjax": "^1.0.3",
    "material-ui": "^0.15.4",
    "medium-editor": "^5.22.0",
    "minutes-seconds-milliseconds": "^1.0.3",
    "moment": "^2.15.0",
    "moment-duration-format": "^1.3.0",
    "mongod": "^1.3.0",
    "mongodb": "^2.2.9",
    "mongoose": "^4.6.0",
    "monk": "^3.1.2",
    "morgan": "^1.7.0",
    "normalize.css": "^3.0.3",
    "passport": "^0.3.2",
    "passport-local": "^1.0.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-markdown": "^2.4.2",
    "react-medium-editor": "^1.8.1",
    "react-redux": "^4.4.5",
    "react-redux-form": "^0.14.5",
    "react-rich-markdown": "^1.0.1",
    "react-router": "^2.7.0",
    "react-router-redux": "^4.0.5",
    "react-tap-event-plugin": "^1.0.0",
    "react-tinymce": "^0.5.1",
    "redux": "^3.6.0",
    "redux-form": "^6.0.5",
    "redux-form-material-ui": "^4.0.1",
    "redux-promise-middleware": "^4.0.0",
    "redux-thunk": "^2.1.0",
    "reselect": "^2.5.3",
    "screenfull": "^3.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "start:prod": "pushstate-server build",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "server": "cd client/api && pm2 start server.js --watch",
    "proxy": "http://128.199.139.144:3000"
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }
}

我也尝试克隆我的存储库，并得到相同的错误。 如果有人可以给我一些方法来查找发生的情况。 谢谢

我有一组非常简单的react组件：

• .then()挂接到redux并处理操作，存储订阅等
• .then()显示我的项目列表
• .then()是一种将新项目添加到列表的表单

我有一些反应路由器路由，如下所示：

<Route name='products' path='products' handler={ProductsContainer}>
  <Route name='productNew' path='new' handler={ProductNew} />
  <DefaultRoute handler={ProductsList} />
</Route>

因此显示的是.then()或dispatch，但未同时显示。

我想做的是，一旦成功添加了新项目，就使应用程序重新路由回列表。

到目前为止，我的解决方案是在异步dispatch之后使用.then()：

dispatch(actions.addProduct(product)
  .then(this.transitionTo('products'))
)

这是执行此操作的正确方法，还是我应该以其他方式触发其他操作以触发路线更改？

创建React应用时，默认情况下会调用Service Worker。 为什么要使用服务人员？ 默认调用的原因是什么？

我正在使用新的React Context API而不是Redux开发一个新应用，并且以前使用getUsers，例如，当我需要获取用户列表时，我只是简单地调用componentDidMount我的操作，但是现在使用React Context我的操作 驻留在我的渲染函数内部的使用者中，这意味着每次调用渲染函数时，它将调用我的操作以获取用户列表，这不好，因为我将执行许多不必要的请求。

因此，如何只调用一次动作（例如getUsers）而不是调用render？

只是为了举例说明，请看以下代码：

假设我将所有getUsers包装在一个组件中，如下所示：

import React from 'react';

import UserProvider from './UserProvider';
import PostProvider from './PostProvider';

export default class Provider extends React.Component {
  render(){
    return(
      <UserProvider>
        <PostProvider>
          {this.props.children}
        </PostProvider>
      </UserProvider>
    )
  }
}

然后，我将这个Provider组件包装了所有应用程序，如下所示：

import React from 'react';
import Provider from './providers/Provider';
import { Router } from './Router';

export default class App extends React.Component {
  render() {
    const Component = Router();
    return(
      <Provider>
        <Component />
      </Provider>
    )
  }
}

现在，以我的用户视图为例，它将是这样的：

import React from 'react';
import UserContext from '../contexts/UserContext';

export default class Users extends React.Component {
  render(){
    return(
      <UserContext.Consumer>
        {({getUsers, users}) => {
          getUsers();
          return(
            <h1>Users</h1>
            <ul>
              {users.map(user) => (
                <li>{user.name}</li>
              )}
            </ul>
          )
        }}
      </UserContext.Consumer>
    )
  }
}

我想要的是：

import React from 'react';
import UserContext from '../contexts/UserContext';

export default class Users extends React.Component {
  componentDidMount(){
    this.props.getUsers();
  }

  render(){
    return(
      <UserContext.Consumer>
        {({users}) => {
          getUsers();
          return(
            <h1>Users</h1>
            <ul>
              {users.map(user) => (
                <li>{user.name}</li>
              )}
            </ul>
          )
        }}
      </UserContext.Consumer>
    )
  }
}

但是当然上面的示例不起作用，因为getUsers不在我的“用户”查看道具中。 如果可能的话，正确的方法是什么？

我开始对使用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有很多使用PropTypes来检查道具价值的方法。 我通常使用的一个是React.PropTypes.shape({...})。但是，最近我遇到了一种情况，其中我有一个对象，该对象中将包含动态键/值。 我知道每个键都应该是一个字符串（采用已知格式），每个值都应该是一个整数。 即使使用自定义道具验证功能，它仍然假设您知道道具的钥匙。 如何使用PropTypes检查对象/形状的键和值是否正确？

...
someArray: React.PropTypes.arrayOf(React.PropTypes.shape({
  // How to specify a dynamic string key? Keys are a date/datetime string
  <dynamicStringKey>: React.PropTypes.number
}))
...

再说一遍：我至少要检查每个键的值是一个数字。 理想情况下，我还希望能够检查密钥本身是否为格式正确的字符串。

如何在ReactJS中手动触发点击事件？当用户单击element1时，我想自动触发对2597763076309129124096标记的单击。

<div className="div-margins logoContainer">
  <div id="element1" className="content" onClick={this.uploadLogoIcon}>
    <div className="logoBlank" />
  </div>
  <input accept="image/*" type="file" className="hide"/>
</div>

升级到版本undefined之后，我看到错误并建议使用undefined而不是React.render()，但是我应该从哪里导入呢？

当我不导入它并按原样运行时，它显示为undefined。它是内置功能还是3rd party库？