标签: react-jsx

我正在学习本教程:http://reactkungfu.com/2015/07/approaches-to-testing-react-components-an-overview/

试图了解"浅渲染"的工作原理.

我有一个更高阶的组件:

import React from 'react';

function withMUI(ComposedComponent) {
  return class withMUI {
    render() {
      return <ComposedComponent {...this.props}/>;
    }
  };
}

和一个组件:

@withMUI
class PlayerProfile extends React.Component {
  render() {
    const { name, avatar } = this.props;
    return (
      <div className="player-profile">
        <div className='profile-name'>{name}</div>
        <div>
          <Avatar src={avatar}/>
        </div>
      </div>
    );
  }
}

和测试:

describe('PlayerProfile component - testing with shallow rendering', () => {
  beforeEach(function() {
   let {TestUtils} = React.addons;

    this.TestUtils = TestUtils;

    this.renderer = TestUtils.createRenderer();
    this.renderer.render(<PlayerProfile name='user' …

我在使用TypeScript编写的React组件中更新状态时出现问题(React with Addons 0.13.3,Typescript 1.6.0-dev.20150804,定义文件来自http://definitelytyped.org/).

/// <reference path="react/react-addons.d.ts" />
import React = require("react/addons");

interface AppState {
}

interface TestState {
    liked: boolean,
    name: string
}

class Tester extends React.Component<any, TestState> {
    constructor(props) {
        super(props);
        this.state = { liked: false, name: "Anders" };
    }

    handleClick(evt, domNode): void {
        this.setState({ liked: !this.state.liked, name: this.state.name });
    }

    handleChange(evt, a, b, c): void {
        this.setState({ liked: this.state.liked, name: evt.target.value });
    }

    render() {
        var text = this.state.liked ? "liked " : "haven't …

我正在使用React.JS进行构建,并且正在构建一个范围输入滑块,其中包含两个组件选项.

这是我的代码:

<input id="typeinp" type="range" min="0" max="5" value="3" step="1"/>

当我将它放入我的客户端渲染组件并尝试切换它时它根本不移动.测试它到我已经进行的JS/PHP构建,它工作正常.

为什么这在JSX/React.JS中不起作用以及建议的解决方法是什么？

谢谢!

我有代码只有在导入React之后才能工作,但我没有在任何地方使用React而是使用reactDom

import ReactDOM from 'react-dom'
import React, {Component} from 'react'

class App extends Component {
  render () {
    return (
      <div>comp </div>
    )
  }
}

//ReactDOM.render(<App/>, document.getElementById('root'))
ReactDOM.render(<div>sv</div>, document.getElementById('root'))

为什么要求导入React？

我试图为以下div动态更改背景图像样式:

这是我改变它的组件,

render: function() {
  var divImage = {
    backgroundImage : "url(" + this.state.song.imgSrc + "),url(" + this.state.nextImgSrc + ");" 
  };

  return (
    <li>
      <div ref="image-pane" className="player" style={divImage}></div>
    </li>
  )
}

谢谢您的帮助

我正在尝试使用多行字符串创建一个表,但我的表格未正确格式化该字符串.这是jsx:

<td>
  {arr.join('\n')}
</td>

这里是相应的html:

<td data-reactid=".xyz">Line 1
Line 2
Line 3
Line 4</td>

但在浏览器中它看起来像:

发生了什么,我如何让我的新线出现？

我有一个多维数组:一个results包含18个数组的数组row,每个数组包含6个数字.

我想把它渲染成一张桌子.逻辑是

results.each as (row)
     <tr>
         row.each as (number)
               <td>number</td>
     </tr>

但我无法弄清楚你是如何用JSX写的.

const Resultset = props => (
    {props.rows.map(rows => {
        <tr>
            {rows.map(number => <td>{number}</td>)}
        </tr>
    })}
);

但那不对.这是什么程序,如何嵌套地图调用和插值？

在React Native iOS中,我想在图片中滑入和滑出.

在下面的示例中,当按下按钮时,Payment Information视图从底部弹出,按下折叠按钮时,它会向下并消失.

这样做的正确和正确的方法是什么？

先感谢您!

编辑

我是React的新手,看过一些类似的问题,但没有发现为什么会这样.我得到一个"未捕获的TypeError:this.state.data.map不是一个函数".这是代码.请帮忙找出问题所在.

class Audienses extends React.Component {

    constructor (props)
    {
        super(props);

        this.state = {
            data: ''
        };

        this.loadFromServer = this.loadFromServer.bind(this);
        this.childeDelete = this.childeDelete.bind(this);
        this.childeEdit = this.childeEdit.bind(this);

    }

    loadFromServer () {
        var xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = function() {
            var data = JSON.parse(xhr.responseText);
            this.setState({ data: data });

        }.bind(this);
        xhr.send();
    }

    componentDidMount() {
        this.loadFromServer();   
    }


     render () {

         var audienses = this.state.data.map((value, index) => (
           <OneElement key={value.id} audience={value.audience} description={value.description} />
        ));

        /* or like this
         var audienses = this.state.data.map(function(s) …

当我以这种方式绑定时如何修复此错误:先前在构造函数中绑定已解决,但这对我来说有点复杂:

    {this.onClick.bind(this, 'someString')}>
and
     <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>