标签: react-jsx

非常简单的问题,当我在渲染时通过数组循环与.map函数反应,说:

render() {
        let board = this.props.board;

        return (
            <div>
                 {
                   board.map((piece,index) => {
                       return (
                           <Piece data={piece}/>
                       );
                   })
                 }
            </div>
        );
    }

我正在尝试每5件添加一个断行,所以 在我尝试连接或者做这样的事情之前(index % 5 == 0)添加:<br /><Piece />
+

board.map((piece,index) => {
      return (
                (index % 5 == 0) ? <br /> : ''
                <Piece data={piece}/>
             );
})

我得到了[Object object]'s 矩阵的输出

我是React.js的新手，并尝试了一些示例。我的js文件中包含以下代码：

var React = require('react');
var ReactDOM = require('react-dom');

var header = <h1>Test</h1>   
ReactDOM.render(header, document.getElementById('react-application'));

我的index.html文件的id为div react-application。

gulpfile的内容为：

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('default', function(){
       return browserify('./source/app.js')
            .transform(babelify)
            .bundle()
            .pipe(source('test.js'))
            .pipe(gulp.dest('./build/'));
      });

当我运行“ gulp”时，出现以下错误：

e:/react/test/source/app.js: Unexpected token (4:13)
[0m  2 | [36mvar[39m ReactDOM [1m=[22m require[94m[1m([22m[39m[31m'react-dom'[39m[94m[1m)[22m[39m[1m;[22m
  3 |
> 4 | [36mvar[39m header [1m=[22m [1m<[22mh1[1m>[22mTest[1m<[22m[1m/[22mh1[1m>[22m
    |              ^
  5 |
  6 | ReactDOM[1m.[22mrender[94m[1m([22m[39mheader[1m,[22m document[1m.[22mgetElementById[94m[1m([22m[39m[31m'react-application'[39m[94m[1m)[22m[39m[94m[1m)[22m[39m[1m;[22m[0m......

相同的代码可在babeljs上正确呈现。错误出现在将html分配给var标头的行上。

可能是什么问题呢？

我的项目中有两个文件

• index.html:包含'app-container',其中reactjs组件挂载
• app.js:具有react组件的文件

我想在我的reactjs应用程序中使用facebook喜欢和分享按钮.但我希望它们只在某些时间出现.

也就是说,我想从reactjs的render()函数中显示它们,而不是永久地在我的html页面上显示它们.

我按以下方式进行 -

1.)我在index.html页面上添加了facebook javascript SDK的链接.

2.)我在render方法中添加了like/share按钮的代码插件.

<div class="fb-share-button" data-href="http://localhost:3000/game" id = "fbshare" data-layout="button_count"></div>

但问题是,即使组件正确安装,/ share按钮也不可见.

任何人都可以指出我应该如何进行？

我目前正在研究我的第一个React项目,我遇到了在组件之间传递数据的问题.我正在使用此库日历小部件,以根据列表中的选定项目设置不同的日期.

https://github.com/vazco/meteor-universe-react-widgets

在这个结构中,我有四个在我的树中的交互组件:

-----A-----
|         |
C         B
|
|
D

我目前正在从顶级组件(组件A)的列表(组件B)中存储所选项目的数据.我想要传递数据的组件是组件D.我想要做的是创建一个状态并将值传递给C然后传递给D.不幸的是,C是库中的日历组件,我无法真正操作.

因为我需要D中访问B中的选择所生成的对象而不能操作C,有没有办法在子组件的头部传递值？

代码片段:

如何在A中调用组件C(日历),同时也传入组件D(dayComponent).

<Calendar dayComponent={DayComponent}/>;

日历组件声明和导入

System.import('{universe:react-widgets}').then(ReactWidgets => {

    Calendar = ReactWidgets.Calendar;
});

Day组件返回日历日的样式.

 DayComponent = React.createClass({
  render() {
    var date = this.props.date
      , style = { backgroundColor: date < new Date() && '#F57B7B' }

    return (<div style={style}>
        {this.props.label}
      </div>);
  }
})

因此,我需要动态确定要显示的组件..例如,所以.我有:

import Component1 from '..somepath/Component1'
import Component1 from '..somepath/Component2'

var P = {
   red: Component1,
   blue: Component2
}

render() {
  var newComponent = P[color];
  return (
     <newComponent /> // not working
     {newComponent} // not working
    newComoponent // not working

  )
}

这种映射可能很大,因此没有进行切换或if/else.

如何让它返回另一个组件？

我是Django和ReactJS的新手,正在尝试使用本教程将简单的JSX代码编译为JS:http://geezhawk.github.io/2016/02/02/using-react-with-django-rest-framework .html 没有用,所以我npm run dev以前编译,现在它工作但是在浏览器控制台中出错:未捕获的ReferenceError:react未定义这是我的webpack.config.js

    var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var nodeExternals = require('webpack-node-externals');


module.exports = {
    //the base directory (absolute path) for resolving the entry option
    context: __dirname,
    //the entry point we created earlier. Note that './' means
    //your current directory. You don't have to specify the extension  now,
    //because you will specify extensions later in the `resolve` section
    entry: './assets/js/index',

    output: {
        //where you want your compiled …

如何将在jsx文件中定义的react-components捆绑在index.js文件中？

以某种方式可以通过访问组件import module from "/module"; let C = module.Component;。

带有：

/module
  index.js
  Component.jsx

我启动ReactJS,我尝试使用Firebase作为数据库来收集我的数据.我从2天后就陷入了这个错误的原因:"无法读取属性'setState'的null"

我可以从Firebase读取我的数据,但我无法显示它们......我真的不知道该怎么做:

import React from 'react';
import ProductList from '../Product/ProductList';
import Firebase from 'firebase';

class HomePage extends React.Component {
  constructor() {
    super();

    this.state = {
      productList: []
    }

    var firebaseRef = new Firebase('https://codehunt-one.firebaseio.com/');
    firebaseRef.child("products").on('value', function(snapshot) {
      var products = snapshot.val();
      console.log(products);

      this.setState({
        productList: products
      })
    });
  }

  render() {
    return (
      <section>
        <header>
          <img src="img/banner.jpeg" width="100%" />
        </header>

        <section>
          <section className="container">
              {this.state.productList
                ?
                <ProductList productList={this.state.productList}/>
                :
                null
              }

          </section>
        </section>
      </section>
    );
  }
}

export default HomePage;

我正在尝试在元素内部渲染一个对象(Panel元素react-bootstrap).

import React, { PropTypes } from 'react';
import { Panel } from 'react-bootstrap';

const NetworkDetail = React.createClass({
  render () {
    return (
      <Panel header="Network Details" bsStyle="info">
        {this.props.dataDetail && Object.keys(this.props.dataDetail).map(function(detail, id) {
            return <span key={id}>{this.props.dataDetail[detail]}</span>;
        }.bind(this))}
      </Panel>
    )
  }
})

export default NetworkDetail

但这不起作用.抛出的错误是

未捕获的不变违规:对象无效作为React子对象(找到:具有键{self}的对象).如果您要渲染子集合,请使用数组,或使用React附加组件中的createFragment(object)包装对象.检查'NetworkDetail'的render方法.

我不明白的是,如果我使用

return <span key={id}>{this.props.dataDetail.myProperty}</span>;

有用.

如何渲染对象的所有属性和值？

我正在尝试创建一个表React组件,它将数据和标题作为道具.我遇到了一个问题,我无法得到forEachMap 的方法,不会创建必要的子元素.

列的输入prop如下所示:

let cols = {
  payment: 'Payment',
  date: 'Processing Date',
  amount: 'Amount',
  payee: 'Payee'
};

这是我的React表组件的一个方法,它生成标题元素:

generateTableHead() {
  let columnsMap = new Map((Object.entries(this.props.columns)));
  let i = 0;
  return (
    <tr>
      {columnsMap.forEach((columnValue) =>
        <th key={i++}>
          {columnValue}
        </th>
      )}
    </tr>
  );
}

问题是<th>孩子不存在于被<tr>返回的对象中; 我得到了一个emtpy <tr></tr>.

但是,如果我使用Array.prototype.map,则<th>可以正确创建子元素WILl.

generateTableHead() {
  let columnsArray = Object.entries(this.props.columns);
  return (
    <tr>
      {columnsArray.map((column, index) =>
        <th key={index}>{column[1]}</th>
      )}
    </tr>
  );
}

我更喜欢第一个版本,因为代码稍微有点理解,因为我将在Map对象中引用键和值,而不是在第二个版本中使用数组索引.

我确信这有一个非常简单的解释,或者我做了一个非常简单的错误,我无法发现.如果有人能指出问题,我将非常感激!