标签: react-jsx

我有一个简单的jsx问题,所以请原谅我的愚蠢.

我正在使用React的jsx命令行编译器.我有一个非常简单的JSX文件,如下所示:

var helloWorld = React.createClass({
    render: function() {
        return <div>hello</div>
    }
})

如果我在命令行中键入以下内容,它将编译(并在控制台中显示结果): jsx test.jsx

我想输出这个文件test.js.但是如果我尝试命令jsx test.jsx test.js没有任何反应 - 它只输出jsx命令的帮助信息.

有任何想法吗？我觉得它应该是显而易见的.

如何在ReactJS中实现以下场景？

function foo1(){
    console.log('foo1')
}

function foo2(){
    console.log('foo2')
}
$('#button').click(foo1);
$('#button').click(foo2);

我希望在单击按钮时调用这两个函数

考虑下面的jsx代码

 Var Component = React.createClass({
    foo1: function(){
        console.log('foo1');
    },
    foo2: function(){
        console.log('foo2');
    },
    render: function(){
        return (
           <button onClick={this.foo}> click me </button>
        );
    }

});

var ElementList = React.createClass({render: function() {
        var x = this.props.icon;
        return (
           {this.props.data.map(function(value,i) {return (      
                <span key={i} className={ "fa " + x } data-id={value.id} ></span>             
            )})}
    );}});

如何直接在map函数中使用this.props.icon。而不是使用x变量并在外部声明它。

Mocha可以在Babel的帮助下处理JSX和ES2015语法:

mocha --compilers js:babel-register

但是当我尝试在我的测试文件夹上运行它时,它找不到任何测试.原因是那里的文件有.jsx扩展名,Mocha只查找.js.

是否可以配置Mocha来查找.jsx/ .es6文件？

我只是尝试一些简单的东西,比如只在handleSubmit函数中打印this.state.validForm,但我似乎无法访问this.state.validForm.首先我直接尝试使用此功能,但无济于事.我是新来的反应.

import React, { Component } from 'react';
import TextInput from './TextInput';

class RequestForm extends Component {
    constructor(props) {
        super(props);
        this.state = {validForm : "false"};
        this.getInfoForm = this.getInfoForm.bind(this);
    }

    getInfoForm() {
        return this.state.validForm;
    }

    handleSubmit(event) {
        event.preventDefault();
        console.log('submit values are');
        console.log(event.target.src.value);
        console.log(event.target.email.value);
        console.log(this.state.validForm);
        console.log(this.getInfoForm());
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <TextInput
                    uniqueName="email"
                    name="email"      
                    text="Email Address"
                    required={true}     
                    minCharacters={6}
                    validate="email" 
                    errorMessage="Email is invalid"
                    emptyMessage="Email is required"
                />

                <TextInput 
                    text="User"
                    name="User src"
                    required={true}
                    minCharacters={3}
                    validate="notEmpty"
                    errorMessage="Name is invalid"
                    emptyMessage="Name is required"
                /> …

所以我有以下几点：

// Build the component HTML.
return (
  <dl className={ classes }>

    {items.map((item, index) =>
      { item.type === 'dd' ?
        <dd key={ index } index={ index }>{ item.text }</dd>
        :
        <dt className="search-result__description-list__description" key={ index } index={ index }>{ item.text }</dt>
      }
    )}

  </dl>
);

问题：什么都没有渲染。数据存在于items. 当我在没有 if-else 语句的情况下简单地记录内容时，它也会返回我的数据。但是，当我使用 if-else 语句时，什么也没有显示。没有错误以太。

有什么想法吗？