标签: react-jsx

我想在ReactJS中做这样的事情:

var MyReactClass = React.createClass({
    render: function() {
        var myDivText = "Hello!";
        var myFontSize = 6; //this is actually something more complicated, I'm calculating it on the fly
        var divStyle = {
            font-size: {fontSize + 'px !important;'},
        };
        return (<div style={divStyle}>{myDivText}</div>);
   }
});

问题是当我运行我的代码时出现这个错误:"模块构建失败:错误:解析错误:第5行:意外的令牌 - "显然,React不喜欢它font-size有一个破折号.我该如何解决这个问题？有没有办法逃脱这个角色的反应？是否有一些不同的css属性反应更好,做同样的事情？

谢谢!

我刚开始使用React.js,我只是不确定是否有一种特殊的方法来获取文本框的值,在这样的组件中返回:

var LoginUsername = React.createClass({
  render: function () {
    return (
      <input type="text" autofocus="autofocus" onChange={this.handleChange} />
    )
  },
  handleChange: function (evt) {
    this.setState({ value: evt.target.value.substr(0, 100) });
  }
});

目前,render方法只能返回单个元素/组件.见:这里

在该票据的讨论中,一些人建议将从React组件返回的多个元素包装在HTML注释中,以便浏览器忽略包装组件,例如:

<A>
    <B></B>
    <Fragment>
        <C></C>
        <D></D>
    </Fragment>
    <E></E>
</A>

会呈现给:

<a>
    <b></b>
    <!--<fragment data-reactid="">-->
        <c></c>
        <d></d>
    <!--</fragment>-->
    <e></e>
</a>

但是如何实际创建一个只呈现HTML注释的组件？换句话说,上面例子中'fragment'组件的render函数如何看起来像？

我刚开始学习React并且遇到了这个错误.

未捕获的TypeError:无法在新路由器上读取未定义的属性"pathname"

这是我的代码:

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Router, IndexRoute } = require('react-router');
var hashHistory = require('react-router-redux')

var Main = require('./components/Main');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
  document.getElementById('app')
);

我以下的教程使用React-Router 2.0.0,但在我的桌面上我使用的是4.1.1.我尝试搜索更改,但未能找到有效的解决方案.

"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8"

我试图将zurb揭示与形式整合到反应组件中.到目前为止,下一个代码正确显示模态形式:

ModalForm = React.createClass({
  handleSubmit: function(attrs) {
    this.props.onSubmit(attrs);
    return false;
  },

  render: function(){
    return(
      <div>
        <a href="#" data-reveal-id="formModal" className="button">Add new</a>
        <div id="formModal" className="reveal-modal" data-reveal>
          <h4>Add something new</h4>
          <Form onSubmit={this.handleSubmit} />
          <a className="close-reveal-modal">&#215;</a>
        </div>
      </div>
    );
  }
});

该Form组件非常标准:

Form = React.createClass({
  handleSubmit: function() {
    var body = this.refs.body.getDOMNode().value.trim();
    if (!body) {
      return false;
    }
    this.props.onSubmit({body: body});
    this.refs.body.getDOMNode().value = '';
    return false;
  },
  render: function(){
    return(
      <form onSubmit={this.handleSubmit}>
        <textarea name="body" placeholder="Say something..." ref="body" />
        <input type="submit" value="Send" className="button" /> …

使用React Native的规范方法显然是使用JSX:

render: function() {
  var movie = MOCKED_MOVIES_DATA[0];
  return (
    <View style={styles.container}>
      <Text>{movie.title}</Text>
      <Text>{movie.year}</Text>
      <Image source={{uri: movie.posters.thumbnail}} />
    </View>
  );
}

我怎么才使用JavaScript？通常在正常的React中,它React.createElement('div')可以作为JSX的替代品,但在尝试运行我的iOS React Native应用程序时,我收到错误"null不是函数".

由于某种原因,这个值在react事件处理程序中丢失了.阅读文档,我认为反应做了一些事情,以确保这被设置为正确的值

以下不符合我的预期

import React from 'react';

export default class Observer extends React.Component {

    handleClick() {
        console.log(this); //logs undefined
    }
    render() {
        return (
            <button onClick={this.handleClick}>Click</button>
        );
    }
}

但这样做:

import React from 'react';

export default class Observer extends React.Component {

    handleClick() {
        console.log(this); //logs Observer class instance
    }
    render() {
        return (
            <button onClick={this.handleClick.bind(this)}>Click</button>
        );
    }
}

React和ES6对我来说是新手,但这似乎不是正确的行为？

我正在尝试用JSX标签替换字符串的一部分,如下所示:

render: function() {
    result = this.props.text.replace(":",<div className="spacer"></div>);
    return (
         <div>        
             {result}
         <div>        
    );
}

但考虑到this.props.text就是Lorem : ipsum,它导致

<div>
    Lorem [object Object] ipsum.
</div>

有没有办法解决这个或其他方式用JSX标签替换字符串的部分？

在我的项目中,我使用的是React和Babel,因此我使用了一些ES6功能,但主要是React使用的功能.Webstorm让我可以选择将我的语法标记为ES6或JSX Harmony,我感到困惑.

我想我知道ES6/ES2015是什么以及如何在编译器中使用它,例如.巴贝尔.

难题部分是JSX/JSX Harmony.我知道React使用"JSX"但是:

1. 这和这里的 JSX一样吗？如果不是,WebXorm中的JSX Harmony选项意味着哪个JSX？

2. 我已经看到了这里提到的兼容性页面,并且知道JSX Transformer仅支持ES6的一小部分,但显然Babel支持JSX作为ES6支持的补充,因此JSX似乎不仅仅是ES6子集...如果是这样,那么什么功能JSX React或JSX Harmony不是ES6规范的一部分？

编辑:

至于问题1,我确定,这是两个完全不同的事情.但是什么是JSX Harmony呢？

编辑2:

为了回答我自己的问题,Webstorm JSX Harmony最有可能提到React JSX Compiler支持的语法,带有--harmony标志 - 增加了一点ES6支持.

我正在尝试使用我在React-Native中制作的通用导航组件.在调用时我想设置导航栏色调,标题等.

导航条形码:

var NavigationBar = React.createClass({
    render: function(title, titleColor, NavBarColor) {
        var titleConfig = {
            title: title,
            tintColor: titleColor,
        };

        return (
            <NavBar
                title={titleConfig}
                tintColor={NavBarColor}
                leftButton={<Button style={styles.menuButton}>&#xf0c9;</Button>}
                rightButton={<Button style={styles.menuButton}>&#xf07a;</Button>} />
        );
    }
});

将其应用于其他页面:

<NavigationBar title="Categories" titleColor="#ffffff" NavBarColor="#f0b210"/>

怎么做得好？提前致谢.