标签: reactjs

我第一次搞乱React.js,无法通过点击事件找到在页面上显示或隐藏某些内容的方法.我没有加载任何其他库到页面,所以我正在寻找一些使用React库的本地方式.这就是我到目前为止所拥有的.我想在点击事件触发时显示结果div.

var Search= React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div className="date-range">
                <input type="submit" value="Search" onClick={this.handleClick} />
            </div>
        );
    }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

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

有没有办法只在满足某个条件时才向React组件添加属性？

我应该在渲染之后添加必需和readOnly属性以基于ajax调用来形成元素,但是我无法看到如何解决这个问题,因为readOnly ="false"与完全省略属性不同.

下面的例子应该解释我想要什么,但不会工作(解析错误:意外的标识符).

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});

现在有很多关于redux镇最新孩子的讨论,redux-saga/redux-saga.它使用生成器函数来监听/调度操作.

在我绕过它之前,我想知道redux-saga使用redux-thunkasync/await时使用的优点/缺点而不是下面的方法.

组件可能看起来像这样,像往常一样调度动作.

import { login } from 'redux/auth';

class LoginForm extends Component {

  onClick(e) {
    e.preventDefault();
    const { user, pass } = this.refs;
    this.props.dispatch(login(user.value, pass.value));
  }

  render() {
    return (<div>
        <input type="text" ref="user" />
        <input type="password" ref="pass" />
        <button onClick={::this.onClick}>Sign In</button>
    </div>);
  } 
}

export default connect((state) => ({}))(LoginForm);

然后我的行为看起来像这样:

// auth.js

import request from 'axios';
import { loadUserData } from './user';

// define constants
// define initial state
// export default reducer …

React是否每次都会重新渲染所有组件和子组件setState？

如果是这样,为什么？我认为这个想法是React只在需要的时候渲染 - 当状态改变时.

在下面的简单示例中,两个类在单击文本时再次呈现,尽管状态在后续单击时不会更改,因为onClick处理程序始终将其state设置为相同的值:

this.setState({'test':'me'});

我希望渲染只会在state数据发生变化时发生.

以下是该示例的代码,作为JS Fiddle和嵌入式代码段:

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

[1]: http://jsfiddle.net/fp2tncmb/2/

你如何在React.js中进行去抖动？

我想辩论handleOnChange.

我试过debounce(this.handleOnChange, 200)但它不起作用.

function debounce(fn, delay) {
  var timer = null;
  return function() {
    var context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

var SearchBox = React.createClass({
  render: function() {
    return <input type="search" name="p" onChange={this.handleOnChange} />;
  },

  handleOnChange: function(event) {
    // make ajax call
  }
});

我正在尝试设置我的React.js应用程序,以便只有在我设置的变量为true时才会呈现.

我的渲染功能的设置方式如下:

render: function() {
    var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
    var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    return (
    <div>

if(this.state.submitted==false) 
{

      <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
      <div className="button-row">
         <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
     </div>
     </ReactCSSTransitionGroup>
}
   </div>
    )
  },

基本上,这里的重要部分是if(this.state.submitted == false)部分(我希望在提交的变量设置为false时显示这些div).

但是在运行时,我在问题中得到错误:

未捕获的错误:解析错误:第38行:相邻的JSX元素必须包装在一个封闭的标记中

这是什么问题？我可以用什么来完成这项工作？

当我create-react-app my-app在终端中键入命令时，它似乎可以工作 - 成功下载所有库等。但是在该过程结束时，我收到一条消息，显示template was not provided.

输入

user@users-MacBook-Pro-2 Desktop% create-react-app my-app

输出

Creating a new React app in /Users/user/Desktop/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
..... nothing out of the ordinary here .....
?  Done in 27.28s.

A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.

在 package.json 中 …

如果我点击文本输入,我希望能够点击其他地方以便再次解除键盘(尽管不是返回键).我在所阅读的所有教程和博客文章中都没有找到关于这方面的最细微信息.

这个基本示例对我来说仍然不适用于模拟器中的react-native 0.4.2.无法在我的iPhone上试用它.

<View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Native!
    </Text>
    <Text style={styles.instructions}>
      To get started, edit index.ios.js
    </Text>
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
    <TextInput
      style={{height: 40, borderColor: 'gray', borderWidth: 1}}
      onEndEditing={this.clearFocus}
    />
  </View>

在制作了简单的React示例页面后,我收到此错误:

未捕获错误:不变违规:_registerComponent(...):目标容器不是DOM元素.

这是我的代码:

/** @jsx React.DOM */
'use strict';

var React = require('react');

var App = React.createClass({
  render() {
    return <h1>Yo</h1>;
  }
});

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

HTML:

<html>
<head>
  <script src="/bundle.js"></script>
</head>
<body>
</body>
</html>

这是什么意思？

我正在关注官方React Native网站上的教程.

使用以下代码构建我的项目:

react-native run-ios

我收到错误:

Found Xcode project TestProject.xcodeproj
xcrun: error: unable to find utility "instruments", not a developer   
tool or in PATH

Command failed: xcrun instruments -s
xcrun: error: unable to find utility "instruments", not a developer 
tool or in PATH

虽然,当我从.xcodeproj运行应用程序时,一切正常.

有什么建议？