小编Dmi*_*dov的帖子

我希望能够使用jQuery检测IE9或更少(或者如果有更好的方法？).如果浏览器版本是IE9或更低,那么我想加载一个模式,可以选择升级到Chrome,FF等.

我已经读过$ .browser不再工作了,所以只是想知道实现我想要的最好方法是什么:

$(document).ready(function(){

   /* Get browser */
   $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

   /* Detect Chrome */
   if($.browser.chrome){
      /* Do something for Chrome at this point */
      alert("You are using Chrome!");

      /* Finally, if it is Chrome then jQuery thinks it's 
       Safari so we have to tell it isn't */
       $.browser.safari = false;
  }

  /* Detect Safari */
  if($.browser.safari){
      /* Do something for Safari */
      alert("You are using Safari!");
  }

});

JSX:

var Button = require("react-bootstrap").Button;
var Input = require("react-bootstrap").Input;
var MyClass = React.createClass({
        onclick: function () {
           this.refs.email.getDOMNode().focus();
           console.log('DOM element', this.refs.email.getDOMNode());
        }
        render: function () {
          return (
             <div>
                <Button onClick={this.onlick}>Login</Button>
                <Input ref='email' type='email' />
             </div>
            );
        },
    });  

笔记:

1. 输入字段是一个react-bootstrap.Input类.
2. getDOMNode().focus()概念来自Facebook反应文档

当按钮onclick处理程序运行时,电子邮件输入字段应该获得焦点,但它不会发生.我发现react-bootstrap Input字段类正在渲染包装div中的真实DOM输入字段.这是console.log的输出:

<div class="form-group" data-reactid=".1awy8d4e9kw.1.3.$=1$3:0.0.0.1.0">
  <input class="form-control" type="email" data-reactid=".1awy8d4e9kw.1.3.$=1$3:0.0.0.1.0.1:$input">
</div>

所以看起来输入没有得到焦点,因为焦点应用于包装div,它拒绝它(我document.activeElement在控制台中使用来检查).

问题是,如何关注真实input元素？

注意:有点不相关但React尊重该autoFocus属性.在渲染后需要立即设置焦点时,这很有用.尽管如此,它还不能取代程序化的方式.

我在JavaScript中使用CreateElemant这是我的代码:

function generateInputs()
{
    var i = document.createElement("input");
    for(var j=0;j<4;j++)
    {
        var c = document.createElement("input");
        var r = document.createElement("input");
        r.setAttribute('type',"radio");
        document.getElementById('questions').appendChild(r);
        c.setAttribute('type',"input");
        document.getElementById('questions').appendChild(c);
    }

    i.setAttribute('type',"text");

    document.getElementById('questions').appendChild(i);

}

我想用jQuery编写它,但我找不到createElement()的等价物

假设我在React中有以下父组件和子组件配对:

var ChildComponent = React.createClass({
    getDefaultProps: function(){
        return {
            a: 'a',
            b: 'b',
            c: 'c'
        }
    },

    render: function() {
        return (
            /* jshint ignore:start */
            <div className={'child' + (this.props.b ? ' modifierClass' : '')} something={this.props.a}>
                {this.props.c}
            </div>
            /* jshint ignore:end */
        );
    }
});


var ParentComponent = React.createClass({
    componentDidMount: function(){
        //After 10 seconds, change a property that DOES NOT affect the child component, and force an update
        setTimeout(function(){
            this.setState({foo: 'quux'});
            this.forceUpdate();
        }.bind(this), 10000);
    }

    getInitialState: function(){
        return {
            foo: …

我已经做了一个小小的小提示来显示问题:http://jsfiddle.net/4TpnG/582/ 如果你有一个带有onBlur的输入框,并且来自状态的初始值,则键盘的输入被阻止.附加onChange后,它正常工作.为什么会发生这种情况？如何解决这个问题？我本来希望它接受你输入的字符并更新onBlur的状态.

var Test = React.createClass({

      getInitialState: function() {
        return {
          value: "hallo"
        };
      },

      render: function() {
          return ( < form >
            < div >
            Onchange: < input type = "text"
            value = {
              this.state.value
            }
            onChange = {
              this.handleChange
            }
            /><br/ >
            Onblur: < input type = "text"
            value = {
              this.state.value
            }
            onBlur = {
              this.handleChange
            }
            />
      </div >
            < /form>
    );
  },
  handleChange: function(e){
      this.setState({value: e.target.value});
  }
});

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

我有以下app.tsx文件正常工作从React.Component加载一个App元素和另一个React.Component的子Worklist元素(两个类在同一app.tsx文件中定义).这是在安装了Typescript 1.6的Visual Studio中运行的(ECMAScript版本:ECMAScript 5,JSX编译:React,模块系统:CommonJS).

但是,我想将这两个组件拆分为单独的文件.但是,当我取消注释WorkList的导入并从app.tsx中删除WorkList组件的类定义时 - 它失败并显示错误:

错误TS2604 JSX元素类型'WorkList'没有任何构造或调用签名.

这是工作的app.tsx和所需的worklist.tsx.

// app.tsx
import * as React from "react";
import * as ReactDOM  from "react-dom";
//import * as WorkList from "./worklist";

interface Props {
    foo: string;
}

class WorkList extends React.Component<Props, {}> {
    constructor(props: Props) {
        super(props);
    }
    render() {
        return <h2>WorkList!{this.props.foo} </h2>
    }
}
class App extends React.Component<Props, {}> {
    constructor(props: Props) {
        super(props);
    }
    public render() {
        return <WorkList foo="baz"></WorkList>
    }
}


ReactDOM.render(    
    React.createElement(App, { foo: 'bar' }),
    document.getElementById('app') …

我很难找到使用babel的正确方法,允许我在服务器端使用jsx.

对于babel,Node-jsx已被弃用.似乎babel-core/register应该使用什么,但我仍然得到意想不到的令牌问题.

我创建了一个具有问题的回购.

https://github.com/pk1m/Stackoverflow-helpme

当我运行node app或npm run watch-js我不断获得引用JSX代码'<'的意外令牌时.

我如何让babel转向JSX,或者我完全离开了,谢谢.

我正在试用Facebook的Reactjs库并发现它很棒.我已经完成了示例/教程并使其正常运行.

现在我在:http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

我正在尝试代码:

/** @jsx React.DOM */

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'unlike';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

React.renderComponent(
  <LikeButton />,
  document.getElementById('example')
);

运行上面的代码后,我什么都没得到.在我的谷歌Chrome控制台中,我得到的错误是Uncaught SyntaxError: Unexpected token <,在开始的行上<p onClick={this.handleClick}>

我想知道是否有人可以告诉我代码有什么问题？

最好的祝福.

我正在编写一个复杂的反应应用程序并使用Cortex作为我的中心模型.皮质的哲学是它包装你的数据和更改数据,从根调用完整的重新渲染.这非常有用,尤其是当您有非分层视图更改状态并影响另一个时.

我面临的问题是在重新渲染时保持状态/道具.例如,我有一个特定的层次结构,如下所示:

<Page>
  <EditorCard>
     <Editor/>
     <PublishButton/>
  </EditorCard>
</Page>

在EditorCard需要的JavaScript的情况下Editor,为了使更改Editor上单击PublishButton(我用的内外部库Editor,其公开的编辑方法).因此,Editoron 通过调用传递给它的函数ComponentDidMount将实例设置为propon EditorCard.

我的问题是,当我点击PublishButton我更改皮质对象的值,导致从根重新渲染,并为此松开道具Editor(因为组件已经安装ComponentDidMount不再被调用).

我处理这个问题的方法是缓存getDefaultProps.

在EditorCard我的默认道具里面是:

  getDefaultProps: function() {
    return {
      cachedData: {},
    }
  },

并将编辑器实例保存为 this.props.cachedData.editor = editorInstance

这可以在多次重新渲染中保存道具.

这是如何使用getDefaultProps缓存的？在通过多次重新渲染保存道具时,我打破了这个黑客的一些核心反应规则？如果是这样,你能建议一个更好的结构？

我可以用一个命令编译和运行我的JSX应用程序:

jsx app.jsx | node

但我也希望我的服务器每次修改时都会自动重启app.jsx.我可以用nodemon做到这一点,但我无法弄清楚如何让nodemon事先通过JSX编译器运行我的脚本.

我有一个这样的nodemon.json文件设置:

{
    "execMap": {
        "js": "node",
        "jsx": "jsx {{filename}} | node"
    },
    "ext": "js jsx",
    "ignore": [
        ".hg",
        "node_modules",
        ".idea"
    ],
    "verbose": true
}

但是当我跑的nodemon时候告诉我:

8 Feb 21:58:48 - [nodemon] starting `jsx app.jsx | node`
8 Feb 21:58:48 - [nodemon] child pid: 10976
'\"jsx app.jsx | node\"' is not recognized as an internal or external command,
operable program or batch file.

这很奇怪,因为当我将它直接粘贴到终端时,该命令会逐字逐句.

有没有办法让nodemon运行我的JSX文件？