标签: react-jsx

当我使用以小写字母开头的变量时，页面不显示任何内容。如果我将变量名称更改为以大写字母 (HelloWorld) 开头，则页面将显示内容。

<script type="text/jsx">
 var helloWorld = React.createClass({
    render : function () {
                return (
                    <div>
                    <h1>Hello World</h1>
                    </div>
                    );
    }
 });

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

谁能告诉我为什么会这样？

我是React的新手,我试着关注pretranspile JSX的主题:

https://facebook.github.io/react/docs/tooling-integration.html

我的代码[app.js]非常简单:

var React = require("react");
var ReactDOM = require("react-dom");
var Todo = React.createClass({
    render: function() {
        return <button>Add</button>;
    }
});
ReactDOM.render(<Todo />, docuemtn.getElementById("div1"))

我先安装:

npm install -g babel-cli
npm install react react-dom

然后尝试使用:

babel --watch ./app.js --out-dir ./

但它总是说:

SyntaxError: ./app.jsx: Unexpected token (10:9)
   8 | var Todo = React.createClass({
   9 |  render: function() {
> 10 |          return <div>Hello {this.props.name}</div>;
     |          ^
  11 |  }
  12 | });
  13 |

我想知道如何解决这个问题？

我正在使用 gulp + browserify 来使用 ES2015 并响应 jsx。我想添加一些像这样的外部反应组件：DataPicker。

这是第一次在我的项目中添加外部反应组件，所以我不知道 css 也需要导入。

但我没有使用 webpack，我只是使用 gulp。这些是我的 gulp 节点模块：

• 乙烯基源流
• 乙烯基缓冲液
• 浏览器化
• 巴别化
• babel-preset-es2015
• babel-preset-react

这是我的 gulpfile：

gulp.task('build', function() {
    return browserify('./app.js')
    .transform(babelify, { presets: ["es2015", "react"] }
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./dist'));
});

我发现在 javascript 中使用 import/require css 需要“browserify-css”，所以我添加了“npm install browserify-css”。然后我将转换方法添加到我的 gulpfile 中，如下所示：

gulp.task('build', function() {
    return browserify('./app.js')
    .transform(babelify, { presets: ["es2015", "react"] }
    .transform(require('browserify-css'))
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./dist'));
});

但它刚刚抛出了这样的错误：

events.js:154, 抛出 er; // 未处理的 'error' 事件，SyntaxError: Unexpected token

我在我的 …

在打字稿中,我有一个React Component,Cell,

class Cell extends Component<void, void> {
...
}

当我使用它时,即

<Cell />

我得到的返回类型是JSX.Element.

相反,我试图断言返回值是一个实例Cell,而不是JSX.Element,我怎么能这样做呢？

它失败了,因为它说

Type `Element` is not assignable to type `Cell`

我有以下代码：

const cEditor = (onUpdate, props) => (<SelectEditor onUpdate=(onUpdate) {...props} />);

正在做{...props}什么？似乎它正在将 props 传递给组件。这个语法是什么意思？

有没有办法一步将多个reactjs .jsx文件编译成一个.js文件？

就像是:

jsxtool compile ./src/*.jsx --out app.js

谢谢.

我在Ubuntu 14.04上

我安装了节点

sudo apt-get install node

我安装了npm

sudo apt-get install npm

我安装了react-tools

sudo npm install -g react-tools

当我尝试:

jsx -h

我没有输出.什么想法可能是错的？可能是pebcak,但我会很感激.

jsx转换工具在以下行引发错误说'意外令牌:[':

this.setState({array[index]: value});

显然我只想设置新的状态,但是这个错误迫使我写了一些解决方法.为什么变压器不接受上述线路？

ReactJS JSX具有一种可以轻松地向组件添加许多属性的方法：

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

这些称为传播属性。

https://facebook.github.io/react/docs/jsx-spread.html#spread-attributes

该...表示法称为ES6中使用的Spread运算符。如果您要使用Babel等在服务器端渲染所有内容，那么这很容易使用，但是如果您想在客户端的浏览器中创建和渲染组件，则如何在不使用浏览器的浏览器中使用扩展属性支持ES6 ...Spread运算符？

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator#Browser_compatibility

在React代码中,我return (<form> .. </form>);在HTML里面看到......这是有效的Javascript吗？它以某种方式转换为字符串或什么？

我正在学习Javascript,当然也有一些差距.这让我感到很困惑!

var AddTodoComponent = React.createClass({
  render: function () {
    return (
      <form>
        <input type="text" disabled={AppStore.isSaving()}/>
      </form>
    );
  }
});