标签: reactjs

我正在阅读reactjs文档的Forms部分,并尝试使用此代码来演示用法(JSBIN).onChange

var React= require('react');

var ControlledForm= React.createClass({
    getInitialState: function() {
        return {
            value: "initial value"
        };
    },

    handleChange: function(event) {
        console.log(this.state.value);
        this.setState({value: event.target.value});
        console.log(this.state.value);

    },

    render: function() {
        return (
            <input type="text" value={this.state.value} onChange={this.handleChange}/>
        );
    }
});

React.render(
    <ControlledForm/>,
  document.getElementById('mount')
);

当我<input/>在浏览器中更新值时,回调console.log内的第二个handleChange打印与value第一个相同console.log,为什么我看不到回调this.setState({value: event.target.value})范围内的结果handleChange？

我收到以下错误

未捕获的TypeError:无法读取未定义的属性"setState"

甚至在构造函数中绑定delta之后.

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta.bind(this);
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}

我是ReactJS和JSX的新手,我对下面的代码有点问题.

我试图className在每个属性上添加多个类li:

<li key={index} className={activeClass, data.class, "main-class"}></li>

我的React组件是:

var AccountMainMenu = React.createClass({
  getInitialState: function() {
    return { focused: 0 };
  },

  clicked: function(index) {
    this.setState({ focused: index });
  },

  render: function() {
    var self = this;
    var accountMenuData = [
      {
        name: "My Account",
        icon: "icon-account"
      },
      {
        name: "Messages",
        icon: "icon-message"
      },
      {
        name: "Settings",
        icon: "icon-settings"
      }
    /*{
        name:"Help &amp; Support &nbsp; <span class='font-awesome icon-support'></span>(888) 664.6261",
        listClass:"no-mobile last help-support last"
      }*/
    ];

    return ( …

我想声明一个带有可选路径参数的路径,因此当我添加页面以执行额外的操作时(例如填充一些数据):

http:// localhost/app/path/to/page <=呈现页面 http:// localhost/app/path/to/page/pathParam <=根据pathParam呈现包含一些数据的页面

在我的反应路由器中,我有以下路径,以支持这两个选项(这是一个简化的例子):

<Router history={history}>    
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

我的问题是,我们可以在一条路线上宣布它吗？如果我只添加第二行,则找不到没有参数的路径.

编辑#1:

这里提到的关于以下语法的解决方案对我不起作用,它是否合适？它是否存在于文档中？

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

我的react-router版本是:1.0.3

propsReact.js中是否有使用事件将子项传递给父项的简单方法？

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(event) {
    // event.component.props ?why is this not available?
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

我知道你可以使用受控组件来传递输入的值,但通过整个工具包n'kaboodle会很不错.有时,子组件包含一组您不必查找的信息.

也许有一种方法将组件绑定到事件？

更新 - 2015年9月1日

在使用React超过一年之后,在Sebastien Lorber的回答的推动下,我总结了传递子组件作为父母函数的参数实际上并不是 React方式,也不是一个好主意.我已经改变了答案.

在调整浏览器窗口大小时,如何让React重新渲染视图？

背景

我有一些块,我想在页面上单独布局,但我也希望它们在浏览器窗口更改时更新.最终结果将是Ben Holland的 Pinterest布局,但使用React编写的不仅仅是jQuery.我还有一段路要走.

码

这是我的应用程序:

var MyApp = React.createClass({
  //does the http get from the server
  loadBlocksFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      mimeType: 'textPlain',
      success: function(data) {
        this.setState({data: data.events});
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentWillMount: function() {
    this.loadBlocksFromServer();

  },    
  render: function() {
    return (
        <div>
      <Blocks data={this.state.data}/>
      </div>
    );
  }
});

React.renderComponent(
  <MyApp url="url_here"/>,
  document.getElementById('view')
)

然后我有了Block组件(相当于Pin上面Pinterest示例中的一个):

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

在JSX中,如何props从引用的属性值中引用值？

例如:

<img className="image" src="images/{this.props.image}" />

生成的HTML输出是:

<img class="image" src="images/{this.props.image}">

我试图让SSR在我的应用程序中工作，但出现错误：

Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。

现场演示代码在这里。

问题的现场演示在这里（打开开发工具控制台查看错误）：

文件App.js

 import React from "react";

  class App extends React.Component {

  head() {
    return (
      <head>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <meta name="theme-color" content="#000000" />
        <title>React App</title>
      </head>
    );
  }

  body() {
    return (
      <body>
        <div className="App">
          <h1>Client says Hello World</h1>
        </div>
      </body>
    );
  }

  render() {
    return (
      <React.Fragment>
        {this.head()}
        {this.body()}
      </React.Fragment>
    )
  }
}
export default App;

文件index.js

import React …

npm run start在终端中运行时出现以下错误。

尝试导入错误：“重定向”未从“react-router-dom”导出。

我已经重新安装了node_modules，，react-router-dom。react-router还重新启动了终端和我的计算机，但问题仍然存在。

我的代码：

import React from 'react';
import { Switch, Redirect } from 'react-router-dom';

import { RouteWithLayout } from './components';
import { Minimal as MinimalLayout } from './layouts';

import {
  Login as LoginView,
  Dashboard as DashboardView,
  NotFound as NotFoundView
} from './views';

const Routes = () => {
  return (
    <Switch>
      <Redirect
        exact
        from="/"
        to="/dashboard"
      />
      <RouteWithLayout
        component={routeProps => <LoginView {...routeProps} data={data} />}
        exact
        layout={MinimalLayout}
        path="/login"
      />
      <Redirect to="/not-found" /> …

我是React的新手,我正在尝试编写一个使用API​​的应用程序.我一直收到这个错误:

TypeError:this.setState不是函数

当我尝试处理API响应时.我怀疑这个绑定有问题,但我无法弄清楚如何修复它.这是我的组件的代码:

var AppMain = React.createClass({
    getInitialState: function() {
        return{
            FirstName: " "
        };
    },
    componentDidMount:function(){
        VK.init(function(){
            console.info("API initialisation successful");
            VK.api('users.get',{fields: 'photo_50'},function(data){
                if(data.response){
                    this.setState({ //the error happens here
                        FirstName: data.response[0].first_name
                    });
                    console.info(this.state.FirstName);
                }

            });
        }, function(){
        console.info("API initialisation failed");

        }, '5.34');
    },
    render:function(){
        return (
            <div className="appMain">
            <Header  />
            </div>
        );
    }
});