标签: react-jsx

嗨,我正在通过React.js教程,我遇到了障碍.使用React时,它可以与我页面上的jsx转换器一起使用.一旦我删除该脚本并将jsx编译为js它就不再有效了.我正在使用React在其页面上推荐的jsx编译器.这是我的代码:

的jsfiddle

<div id="content"></div>
<script src="https://fb.me/react-0.13.1.js"></script>
<script type="text/jsx">
    var CommentBox = React.createClass({displayName: "CommentBox",
        render: function() {
            return (
                    React.createElement("div", {className: "commentBox"},
                            "Hello, world! I am a CommentBox."
                    )
            );
        }
    });
    React.render(
            React.createElement(CommentBox, null),
            document.getElementById('content')
    );
</script>

谢谢您的帮助!

我使用Babel编译器将JSX编译为JavaScript.这是我很感兴趣的一段代码.

getInitialState: function getInitialState() {
//List out different states that ListComponent could possibly have
return {
  showList: true,
  listType: this.props.type

在将JSX编译为JS之后,getInitialState是一个命名方法getInitialState().我无法弄清楚为什么它不是匿名方法.

原始代码:

getInitialState: function() {
//List out different states that ListComponent could possibly have
return {
  showList: true,
  listType: this.props.type

这样的写作是否有任何性能优势？

我如何将多个样式属性添加到我的React元素？

我的应用程序中的一些组件使用相同的样式,风格略有不同.我正在努力完成某些事情<div style={this.styles.mainStyle, this.styles.variationInStyle}></div>.

这些样式位于名为styles.js的文件中this.styles.x.它只适用于其中的一种风格.我发现最接近这个解决方案的是Reddit Post.解决方案<div style={$.extend({}, style1, style2)}></div>当然是,它不起作用也不起作用<div style={style1, style2)}></div>.

任何见解将不胜感激!如果答案应来自任何一个来源,我也会在Reddit和Reactiflux Discord小组发帖,我会在这里发布答案.

我想在App.jsx中使用connect()javascript函数.我正在使用流星框架.

App.jsx

import React from 'react';
/* [I THINK THAT SOME IMPORT CODES SHOULD BE HERE..] */

export default class App extends React.Component {
  render() {
    return (
      <div>
        <button 
          onClick={ /* [I WANT TO USE connect() FUNCTION HERE] */ }
        > Connect </button>
      </div>
    );
  }
}

connect.js

function connect() {
  console.log('connected');
}

谢谢.

有人知道,如果可以修改这个清单吗？特别是,我想添加jsx文件类型.

根据当前的路线,我试图更改以下样式,但收到错误:'路线未定义'.如何引用当前路由:navigationBar = {}中的route.name？

<Navigator
 configureScene={...}
 initialRoute={...}
 renderScene={...}
navigationBar={<Navigator.NavigationBar style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar} .../>}
/>

UPDATE

这是我目前的设置index.ios.js:

class practice extends Component {
  constructor(){
    super()
  }

  renderScene(route, navigator){
    return (
        <route.component navigator={navigator} {...route.passProps}/>
    )
  }

  configureScene(route, routeStack) {...}

  render() {
    return (
        <Navigator
          configureScene={this.configureScene}
          initialRoute={{name: 'Login', component: Login}}
          renderScene={(route, navigator) => this.renderScene(route, navigator)}
          style={styles.container}
          navigationBar={
            <Navigator.NavigationBar
              style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar} //This is what I am trying to achieve
              routeMapper={NavigationBarRouteMapper}
            />
          }
        />
    );
  } …

我正在尝试使用webpack创建一个React应用程序.我正在使用babel来传输.jsx文件.但似乎,它不是使用babel加载器加载.jsx文件.我收到以下错误:

ERROR in ./app.jsx
Module parse failed: C:\codebase\react-demo/app\app.jsx Unexpected token (7:15)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:15)
    at Parser.pp$4.raise (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseExpression (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1573:21)
    at Parser.pp$1.parseReturnStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:839:33)
    at Parser.pp$1.parseStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:699:34)
    at Parser.pp$1.parseBlock (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:981:25)
    at Parser.pp$3.parseFunctionBody (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2105:24)
    at Parser.pp$3.parseMethod (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2075:10)
    at Parser.pp$1.parseClassMethod (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1137:25)
    at Parser.pp$1.parseClass (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1118:14)
    at Parser.pp$1.parseStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:697:19)
    at Parser.pp$1.parseTopLevel (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:638:25) …

我是新来的反应,我写下面的代码,得到了

ReactDOM.render Expected the last optional `callback` argument to be a function. `Instead received: Object` 

这是我的代码

var Stats = React.createClass({
    render: function () {
        return (
            <article className="col-md-4">
                <article className="well">
                    <h3>{this.props.value}</h3>
                    <p>{this.props.label}</p>
                </article>
            </article>
        )
    }
});

ReactDOM.render(
    <Stats value={"255.5K"} label={"People engaged"}/>,
    <Stats value={"5K"} label={"Alerts"}/>,
    <Stats value={"205K"} label={"Investment"}/>,
    document.getElementById('stats')
);

我究竟做错了什么？

这是我的补充工具栏组件.

const Sidebar = React.createClass({
  render(){
    let props = this.props;
    return(
      <div className= 'row'>
      <h2>All Rooms</h2>
        <ul>
          {props.rooms.map((room, i) => {
            <li key={i}> {room.name} </li>
          })}
        </ul>
        {props.addingRoom && <input ref='add' />}
      </div>

    );
  }
})

这是我渲染它填充一个房间的地方.

ReactDOM.render(<App>
  <Sidebar rooms={[ { name: 'First Room'} ]} addingRoom={true} />
  </App>, document.getElementById('root'));

<ul></ul>标签内的内容根本不呈现.知道我可能缺少什么.

我试图将道具传递给子组件但是孩子总是收到空的.这是使代码更清晰的代码.

当我传递给子组件一个状态时,它工作 在这里是工作代码:

 render() {
   return (
     <div>
       <PostList list={ this.state.posts }></PostList> 
  </div>
  );
}

但在我的情况下,我想从redux状态传递道具

不工作的代码:

render() {
    return (
      <div>
          <PostList list={ this.props.posts }></PostList>
      </div>
      );
  }
}
function mapStateToProps(state) {
  return {
    posts: state.posts.all,
    postDetail: state.posts.post
  }
}

任何想法为什么PostList在第二种情况下获得一个空对象,即使this.props.posts在调用组件中实际上不是空的？

谢谢