Import_this

import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';

这是我的React Button代码但风格不起作用Hare ...

<Button
  onPress={this.onPress.bind(this)} 
  title={"Go Back"}
  style={{color: 'red', marginTop: 10, padding: 10}}
/>

我也试过这个代码

<Button 
       containerStyle={{padding:10, height:45, overflow:'hidden', 
       borderRadius:4, backgroundColor: 'white'}}
       style={{fontSize: 20, color: 'green'}} 
       onPress={this.onPress.bind(this)} title={"Go Back"}
      > Press me!
</Button>

更新问题:

我也是这样尝试..

<Button
    onPress={this.onPress.bind(this)}
    title={"Go Back"}
    style={styles.buttonStyle}
>ku ka</Button>

样式

const styles = StyleSheet.create({
    buttonStyle: {
        color: 'red',
        marginTop: 20,
        padding: 20,
        backgroundColor: 'green'
    }
});

但没有输出:我的手机截图: -

我正在尝试在示例应用程序中设置react-router,我收到以下错误:

You should not use <Link> outside a <Router>

我的应用程序设置如下:

父组件

const router = (
  <div className="sans-serif">
    <Router histpry={browserHistory}>
      <Route path="/" component={Main}>
        <IndexRoute component={PhotoGrid}></IndexRoute>
        <Route path="/view/:postId" component={Single}></Route>
      </Route>
    </Router>
  </div>
);

render(<Main />, document.getElementById('root'));

儿童/ Main组件

export default () => (
  <div>
    <h1>
      <Link to="/">Redux example</Link>
    </h1>
  </div>
)

知道我在这里做错了吗？

这是一个用于演示问题的Sandbox链接.

我曾多次尝试使用<Form>和<FormControl>组件.每次我使用我都会得到相同的错误:

"warning.js？8a56:45警告:React.createElement:type不应该是null,undefined,boolean或number.它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件).检查render方法的App."

"Uncaught Invariant Violation:元素类型无效:期望一个字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined.检查render方法App."

即使有这个基本的例子:

import React, {Component} from 'react';
import {FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Radio, Button} from 'react-bootstrap';

export default class App extends Component {
  render() {
    return (
      <form>
        <FormGroup controlId="formControlsText">
          <ControlLabel>Text</ControlLabel>
          <FormControl type="text" placeholder="Enter text" />
        </FormGroup>

        <Button type="submit">
          Submit
        </Button>
      </form>
    );
  }
}

有任何想法吗？

我已经切换到路由器v4的反应,很少有测试需要重新实现.我有以下场景:

• 安装组件(检查是否已调用methodA)
• 用酶包装方法改变道具:setProps
• 检查方法是否已被调用两次

对于旧的路由器来说这很容易..但是新的路由器很难:

例如Link,如果包含组件(或子组件),则意味着我们必须提供适当的contxt来呈现组件.这就是为什么MemoryRouter创造了:

const comp = mount(
      <MemoryRouter>
        <Comp {...someProps} />
      </MemoryRouter>
    );
//here comes assertion about spy getting called

感谢我们能够渲染组件(更多信息:https://reacttraining.com/react-router/web/guides/testing)但是..如果我们看一下setProps酶库的方法(http:// airbnb.io/enzyme/docs/api/ReactWrapper/setProps.html):

一种设置根组件的道具并重新渲染的方法.

这意味着如果我调用comp.setProps({.. newProps}),它实际上会更改路径props(MemoryRouter),但不会改变我的组件道具,这很糟糕.

对此类案件的任何见解？

我正在尝试测试具有异步调用的操作.我使用Thunk作为我的中间件.在下面的操作中,如果服务器返回OK响应,我只会调度和更新存储.

export const SET_SUBSCRIBED = 'SET_SUBSCRIBED'

export const setSubscribed = (subscribed) => {
  return function(dispatch) {
    var url = 'https://api.github.com/users/1/repos';

    return fetch(url, {method: 'GET'})
      .then(function(result) {
        if (result.status === 200) {
          dispatch({
            type: SET_SUBSCRIBED,
            subscribed: subscribed
          })
          return 'result'
        }
        return 'failed' //todo
      }, function(error) {
        return 'error'
      })
  }
}

我在编写测试时遇到问题,调试要么调用调用,要么不调用(取决于服务器响应),或者我可以让调用操作并检查存储中的值是否正确更新.

我使用fetch-mock来模拟web的fetch()实现.但是,看起来我的代码块then不会执行.我也试过在这里使用这个例子没有运气 - http://redux.js.org/docs/recipes/WritingTests.html

const middlewares = [ thunk ]
const mockStore = configureStore(middlewares)

//passing test
it('returns SET_SUBSCRIBED type and subscribed true', () => { …

我一直在尝试将Redux集成到我的应用程序中,并且使用React-Router-Redux 5.0.0-alpha.6遇到了问题.

我收到错误:'react-router-redux'中找不到"export'syncHistoryWithStore'.官方指南说导入syncHistoryWithStore,我已经完成了:https: //github.com/reactjs/react-router-redux

我也查看了react-router-redux包里面,似乎没有任何syncHistoryWithStore的迹象.

我错过了什么？

这是我的index.js.Redux正在工作,但我无法使用ConnectedRouter推送一条新路线,显然这是由于浏览器的历史问题.

import React from 'react';
import { render } from 'react-dom'
import { Provider } from 'react-redux';
import { Route } from 'react-router'
import { ConnectedRouter, routerReducer, routerMiddleware, syncHistoryWithStore, push } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'

const store = configure();
const history = syncHistoryWithStore(createBrowserHistory(), store);

const navigation = (
  <Provider store={store}>
      <ConnectedRouter history={history}>
          <SystemManager>
            <div>
            <Route path="/" component={Dashboard}/>
            <Route path="/dashboard" component={Dashboard} />
            .....

            <Route component={NotFound} />
            </div>
          </SystemManager>
      </ConnectedRouter>
    </Provider>
); …

我做的事情如下:

<Router history={browserHistory}>{routes}</Router>

当我在上面的地址栏中的URL更改时,调用将转到服务器,但这不是我想要的,我希望第一次从服务器加载页面,但之后只要路由更改组件只在客户端加载.我在这里错过了什么吗？

在客户端我做的事情如下:

ReactDOM.render(
<Provider store={app.store}>
    <Router history={browserHistory}>{routes}</Router>
</Provider>,
document.getElementById('app'));

我的路线看起来像:

const routes = <Route path="/" component={DJSAppContainer}>
<Route path="page" component={DJSPage}>
<Route path="/page/:pageName" component={PageContainer}/>
</Route>
</Route>;

现在每当我做location.href ="/ page/xyz"时,它都会转到服务器并加载内容.

在http:// localhost/about页面刷新时未找到代码报告404 .但是如果将browserHistory更改为hashHistory,它可以正常工作.

这是我的js文件.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory, hashHistory } from 'react-router';
import $ from 'jquery';

class App extends Component {
  render() {
    return (
      <div>
        <h1>APP!</h1>
        <Link to="/about">/about</Link>
        {this.props.children}
      </div>
    )
  }
}

class About extends React.Component {
  render() {
    return (
      <div>
        <h2>About 33</h2>
      </div>
    )
  }
}

var routes = (
    <Router history={hashHistory}>
        <Route path="/" component={App} />
        <Route path="/about" component={About} />
        <Route …

我正在尝试学习反应路由配置。我将所有导航链接添加到入口点 index.js 的一个位置，我的期望是当有人对导航期间配置的路径做出反应时，应在浏览器中加载相应的组件。我在我的入口文件 index.js 中添加了所有路由路径，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
import { BrowserRouter, Route, hashHistory } from 'react-router-dom';
import AboutUs from './AboutUs.js';
import ContactUs from './ContactUs.js';
import {Switch} from 'react-router';

ReactDOM.render(
  (<BrowserRouter>
     <Switch>
          <Route path="/" component={App}/>
          <Route path="/about-us" component={AboutUs}/>
          <Route path="/contact-us" component={ContactUs}/>
     </Switch>
   </BrowserRouter>)
, document.getElementById('app'));

app.js 如下：

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

class App extends Component {

  constructor(props){
    super(props); …

我有一个组件，其状态作为道具传递给子组件。我注意到即使父组件的状态发生变化，子组件也不会重新渲染。

基于使用 shouldComponentUpdate 的官方 React 文档：

“第一次渲染内部组件时，它将使用 { foo: 'bar' } 作为 value 属性。如果用户单击锚点，父组件的状态将更新为 { value: { foo: 'barbar' } }，触发内部组件的重新渲染过程，它将接收 { foo: 'barbar' } 作为 prop 的新值。

问题在于，由于父组件和内部组件共享对同一对象的引用，因此当该对象在 onClick 函数的第 2 行发生变异时，内部组件所拥有的 prop 将发生变化。因此，当重新渲染过程开始并且调用shouldComponentUpdate时，this.props.value.foo将等于nextProps.value.foo，因为事实上，this.props.value引用与nextProps.value相同的对象。

因此，由于我们会错过道具上的更改并缩短重新渲染过程，因此 UI 不会从“bar”更新为“barbar”。”

如果我不能使用 shouldComponentUpdate，我将如何强制子组件根据父组件的 props 更改重新渲染？

父组件

我希望子组件根据给 showDropzone 的布尔值重新渲染。

     <Dropzone 
      onDrop={this.onDrop} 
      clearFile = {this.clearFile}
      showDropzone = {this.state.filePresent}/>

子组件

export default class Dropzone extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { onDrop } = this.props;
    const {showDropzone} = this.props;
    const {clearFile} …