标签: react-jsx

我试图通过使用this.setState({data:data})更新我的表与ajax调用; 但数据表没有重新绘制新数据？(我可以看到收到新数据)

var GridRow = React.createClass({
    render: function() {
        var data = [], columns;

        if(this.props.columns){
            for(var i = 0; i < this.props.columns.length; i++){
                data.push({
                    HTMLclass: this.props.columns[i].HTMLClass,
                    content: this.props.cells[i]
                })
            }
        }


        columns = data.map(function(col, i) {
            return (
                <td className={col.HTMLclass} key={i}>{col.content}</td>
            );
        }.bind(this));

        return (
            <tr>
                {columns}
            </tr>
        );
    }
});
var GridHead = React.createClass({
    render: function() {
        if(this.props.data){
            var cell = this.props.data.Title;
            var htmlClass = this.props.data.HTMLClass;
        }
        return (
            <th className={htmlClass}>{cell}</th>
        );
    }
});
var GridList = React.createClass({
    render: …

我真的遇到了理解React逻辑的问题.为什么这个IF不起作用？您可以假设所有类都存在,并且循环也在起作用.好吧,即使条件似乎工作,但我的页面上的输出仍然是空白的.....

    var Feature = React.createClass({
    componentDidMount: function(){
        $('input.rating[type=number]').rating();
        initFeatureInstallReady(this.props.feature.feature_id);
    },
    render: function(){

        var backgroundColor = "white";
        var item;
        var props = this.props;

        this.props.feature.slides.map(function(slide, i){

            if(props.feature.feature_id == "start-home-away" && slide.slide_id == 'review'){

                item = <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureReviewHomeAway feature={props.feature} slide={slide} />
                        </div>;

            }else if(props.feature.feature_id == "start-goto-sleep" && slide.slide_id == 'review'){

                item = <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureReviewHomeAway feature={props.feature} slide={slide} />
                        </div>;

            }else{

                item = <div className={i …

我正在和Github的Electron一起编写桌面应用程序,我正在使用React.我注意到的一件事是因为Electron使用io.js,我不再需要webpack来构建我的代码,就像我开发客户端Web应用程序时一样.但是,我仍然需要能够加载JSX的东西.我使用Babel请求挂钩,但似乎有点慢.我真的不需要Babel中的ES6功能,因为它们在io.js中受支持.

有没有其他方法可以将JSX与Electron一起使用？

谢谢

我现在用Reactjs"试水".基于他们的文档,我掀起了一个我坚持的小项目.到目前为止,当选中复选框时,状态会发生变化,但是......不确定如何更改未选中的状态:

var Foo = React.createClass{(
 getInitialState: function() {
    return {
      location: true,
    }
  },

 onClick: function() {
  this.setState({ location: false });
 },

 render: function() {

    var inlineStyles = {
      display: this.state.location ? 'block' : 'none'
    };
  return (
   <div>
    <input type="checkbox"
     onClick={this.onClick}
    /> show / hide bar
    <hr />
    <div style={inlineStyles}>
     <p>bar</p>
    </div>
   </div>
  );
 }

)};

我是否需要使用一种if statement我想要的东西？我需要this.setState.location: true在未经检查的情况下.

替换字符串中的url并将它们作为React链接呈现的正确方法是什么？

说我有一个字符串:'hello http://google.com world',我希望它呈现如下:hello <a href="http://google.com">http://google.com</a> world

我正在为我的Uni写一篇关于React的文章并试图了解它的全部内容.

在那里的网站" 反思中的思考 "一节中,他们指出UI应该在小型组件中分解.这样做的一种方法是使用单一责任原则的技术.

这个范例也是HTML(JSX),CSS(内联样式)和JavaScript应该放在一个文件中的原因吗？

我真的很感激这方面的帮助:我无法使用webpack构建,我得到一个简短的错误列表,从以下开始:

Module not found: Error: Cannot resolve module 'react' in ../client/front_desk.jsx

最后得到一个长列表,如下所示:

Module not found: Error: Cannot resolve 'file' or 'directory' ../node_modules/process/browser.js

这是我的webpack.config.js:

const webpack = require('webpack');
const commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
  entry: {
    front_desk: './front/client/front_desk',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  output: {
    path: 'front/public/js',
    filename: '[name].js', // Template based on keys in entry above
  },
  module: {
    loaders: [
      {
        test: /\.(jsx|js)?$/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react'],
        },
      },
    ],
  },
  plugins: …

我正在使用优步的react-map-gl软件包,但即使在尝试了几天之后,也无法让它运行起来.

我不是想做任何想象的事情 - 但是现在,我只想在我的页面上显示一张地图.我想,一旦我开始工作,我可以尝试更高级的东西.

不幸的是,这就是我所看到的:

有什么建议？

这是我的代码的相关部分(来自.jsx文件):

import React from 'react'
import { connect } from 'react-redux'
import MapGL from 'react-map-gl'

const App = React.createClass({

  render: function () {
    const map = (
        <div>
          <MapGL
            width={700}
            height={450}
            latitude={37.78}
            longitude={-122.45}
            zoom={11}
            mapStyle={'mapbox://styles/mapbox/basic-v9'}
            mapboxApiAccessToken={'pk.ey...<removed for privacy>...'}
          />
        </div>
      )

    return (
      <div>
        =======Map should be below=======
        <br/>
        { map }
        <br/>
        =======Map should be above=======
      </div>
    )
  }
})

export default connect()(App)

我网站上的其他所有内容都有效; 唯一缺少的是地图实际上并没有出现.提前感谢您提供的任何帮助.

寻找使用material-ui组件为Web应用程序创建水平导航菜单的方法.我想从与react文档网站上的菜单非常相似的东西开始:

由于这是一个非常常见的菜单外观,我正在寻找这样的配置的例子,但是无法在材料-ui文档或SO在这里找到它(有一个类似的解决方案,但它并不完全是需要的).

这该怎么做？

我创建了三个基本组件.

A渲染组件B和C B就像标题包含标签1,2,3 C是第一页,其中有两种形式,一次显示一个.在显示第一个表单时,我需要在B组件中显示选项卡1.在显示第二个表单时,我需要在B组件中显示选项卡3.

我只想根据哪个表单显示给B组件从C组件传递数据.

我把状态放在C组件上并尝试使用相同的this.state.data或this.props.data,因为B控制器中没有值.

A.jsx

import React from 'react';
import B from './B.jsx';
import C from './C.jsx'
class A extends React.Component {
    constructor(props) {
        super();
        this.state = {
            show : '1',
        }
    }
    render() {
        return (
            <div>{this.props.show}
                <B />
                <C/>
            </div>
        )
    }
}

export default A;

B.jsx

import React from 'react';

class B extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show : '1',
        }
    }
    render() {
        return (
            //html code here
        )
    } …