小编Dmi*_*dov的帖子

我使用browserify和watchify,并想require()比默认扩展名的其他文件.js,并.json没有指定扩展名,比如:

// Not ideal (tedious)
var Carousel = require('./components/Carousel/Carousel.jsx')

// Ideal
var Carousel = require('./components/Carousel/Carousel')

我曾尝试--extension=EXTENSION为在指定browserify文档:

"scripts": {
  "build": "browserify ./src/App.js --transform [ reactify --es6 ] > dist/script.js -v -d --extension=jsx",
  "watch": "watchify ./src/App.js --transform [ reactify --es6 ] -o dist/script.js -v -d --extension=jsx"
},

但是我没有看到任何变化.这可能吗？这样做的正确方法是什么？

我在React面临一个非常讨厌的行为.我想使用上传从父组件到子组件的上下文getChildContext.只要我不在{this.props.children}渲染功能中使用,一切正常.如果我这样做,则子组件的上下文未定义.

我附加了一个重现此行为的代码示例.我无法弄清楚为什么bar组件的上下文字段Baz是undefined.

var Baz = React.createClass({
 contextTypes: {
   bar: React.PropTypes.any
 },
 render: function() {
   console.log(this.context);
   return <div />;
 }
});

var Bar = React.createClass({
 childContextTypes: {
   bar: React.PropTypes.any
 },

 getChildContext: function() {
   return {
     bar: "BAR"
   };
 },

 render: function() {
   return (<div>{this.props.children}</div>);
 }
});

var Foo = React.createClass({
 render: function() {
   return <Bar>
      <Baz />
   </Bar>;
 }
});

console.log(React.version);

React.render(<Foo />, document.body);

控制台输出:

Warning: owner-based and parent-based contexts differ …

如何在Typescript tsx中遍历React组件的子项？

以下是有效的jsx:

public render() {
    return (
        <div>
            {React.Children.map(this.props.children, x => x.props.foo)}
        </div>
    );
}

但是,在Typescript中,x的类型是React.ReactElement<any>这样我无法访问props.我需要做某种铸造吗？

我使用的阵营与JSX与反应的工具来编译代码JSX为JavaScript.

在harmony启用该选项的情况下,JSX支持哪些ES6功能？

我有一个输入标签,我正在尝试将占位符的内容设置为组件的道具.在编译JSX并在浏览器中运行它之后,占位符根本不显示.它也没有抛出任何错误.我怎样才能做到这一点？

<input type="text" onChange={this.props.handleChange} placeholder={this.props.name} />

如何让React允许你在javascript中编写JSX(XML)而不会抛出任何错误？我一直试图绕过它,我不太确定底层代码是如何完成它的.

我目前有这个简单的反应应用程序,我不能让这些onchange事件为我的生命开火.

var BlogForm = React.createClass({
getInitialState: function() {
    return {
        title: '',
        content: ''
    };
},
changeTitle: function(event) {

    var text = event.target.value;

    console.log(text);

    this.setState({
        title: event.target.value
    });
},
changeContent: function(event) {
    this.setState({
        content: event.target.value
     });
},
addBlog: function(ev) {
    console.log("hit hit");
},
render: function() {
    return (
                <form onSubmit={this.addBlog(this)}>
                    <div>
                        <label htmlFor='picure'>Picture</label>
                        <div><input type='file' id='picture' value={this.state.picture} /></div>
                    </div>
                    <div>
                        <input className="form-control" type='text' id='content' value={this.state.title} onChange={this.changeTitle} placeholder='Title' />
                    </div>
                    <div>
                        <input className="form-control" type='text' id='content' value={this.state.content} onChange={this.changeContent} placeholder='Content' />
                    </div>
                    <div> …

我注意到 babel 几乎没有关于错误配置的信息。例如，我创建了新的应用程序react-native-cli，安装了装饰器插件并填写babel.config.js如下：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['@babel/plugin-proposal-decorators', { legacy: true }],
};

并且有同样的抱怨，就好像没有安装插件一样。正确的配置是：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
};

现在我正在尝试安装jsx-control-statements并导致相同的静默失败， ReferenceError: Can't find variable: Choose就好像根本没有安装这样的插件一样。我的babel.config.js是：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'jsx-control-statements',
    ['@babel/plugin-proposal-decorators', { legacy: true }],
  ],
};

所以问题是：如何调试这个配置？如何从 babel 获取有关错误配置/未找到包等的诊断信息？

我刚刚开始使用React,并且正在尝试使用React Components重新创建现有的HTML输出.

我不确定这是一个错误,还是我做错了什么,但最终的HTML输出并不是我所期待的.

问题是标签锚文本不应包含在范围内,只能包含以下数字.

从这个JSX开始:

/** @jsx React.DOM */;
var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <div>
          <ul>
            <li><a>Tab1 <span>3</span></a></li>
            <li><a>Tab2 <span>9</span></a></li>
            <li><a>Tab3 <span>5</span></a></li>
            <li><a>Tab4 <span>6</span></a></li>
          </ul>
        </div>
      </div>
    );
  }
});
React.renderComponent(MyComponent({}), document.body);

编译成以下JS:

/** @jsx React.DOM */;
var MyComponent = React.createClass({displayName: 'MyComponent',
  render: function() {  
    return (
      React.DOM.div(null, 
        React.DOM.div(null, 
          React.DOM.ul(null, 
            React.DOM.li(null, React.DOM.a(null, "Tab1 ", React.DOM.span(null, "3"))),
            React.DOM.li(null, React.DOM.a(null, "Tab2 ", React.DOM.span(null, "9"))),
            React.DOM.li(null, React.DOM.a(null, "Tab3 ", React.DOM.span(null, "5"))),
            React.DOM.li(null, React.DOM.a(null, "Tab4 ", React.DOM.span(null, "6")))
          ) …

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属性.在渲染后需要立即设置焦点时,这很有用.尽管如此,它还不能取代程序化的方式.