标签: react-jsx

我正在尝试找到正确的方法来定义一些可以通用方式使用的组件:

<Parent>
  <Child value="1">
  <Child value="2">
</Parent>

当然,父级和子级组件之间的渲染有一个逻辑,你可以想象<select>并<option>作为这种逻辑的一个例子.

对于问题,这是一个虚拟实现:

var Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

var Child = React.createClass({
  onClick: function() {
    this.props.doSomething(this.props.value); // doSomething is undefined
  },
  render: function() {
    return (<div onClick={this.onClick}></div>);
  }
});

问题是每当你{this.props.children}用来定义包装器组件时,如何将一些属性传递给它的所有子组件？

我有一个外部(对组件),可观察的对象,我想听取更改.当对象更新时,它会发出更改事件,然后我想在检测到任何更改时重新呈现组件.

使用顶级React.render这是可能的,但在一个组件中它不起作用(这有一定意义,因为该render方法只返回一个对象).

这是一个代码示例:

export default class MyComponent extends React.Component {

  handleButtonClick() {
    this.render();
  }

  render() {
    return (
      <div>
        {Math.random()}
        <button onClick={this.handleButtonClick.bind(this)}>
          Click me
        </button>
      </div>
    )
  }
}

单击按钮会在内部调用this.render(),但这不是实际导致渲染发生的原因(您可以看到此操作因为创建的文本{Math.random()}不会更改).但是,如果我只是打电话this.setState()而不是this.render(),它可以正常工作.

所以我想我的问题是: React组件需要有状态才能重新渲染吗？有没有办法强制组件按需更新而不改变状态？

我知道你可以在React类中指定样式,如下所示:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

我是否应该以这种方式做所有样式,并且我的CSS文件中没有指定任何样式？

或者我应该完全避免使用内联样式？

做两件事似乎很奇怪和混乱 - 在调整样式时需要检查两个地方.

我正在阅读reactjs文档的Forms部分,并尝试使用此代码来演示用法(JSBIN).onChange

var React= require('react');

var ControlledForm= React.createClass({
    getInitialState: function() {
        return {
            value: "initial value"
        };
    },

    handleChange: function(event) {
        console.log(this.state.value);
        this.setState({value: event.target.value});
        console.log(this.state.value);

    },

    render: function() {
        return (
            <input type="text" value={this.state.value} onChange={this.handleChange}/>
        );
    }
});

React.render(
    <ControlledForm/>,
  document.getElementById('mount')
);

当我<input/>在浏览器中更新值时,回调console.log内的第二个handleChange打印与value第一个相同console.log,为什么我看不到回调this.setState({value: event.target.value})范围内的结果handleChange？

我如何选择在JSX中包含一个元素？下面是一个使用横幅的示例,如果已经传入,该横幅应该在组件中.我想要避免的是必须在if语句中复制HTML标记.

render: function () {
    var banner;
    if (this.state.banner) {
        banner = <div id="banner">{this.state.banner}</div>;
    } else {
        banner = ?????
    }
    return (
        <div id="page">
            {banner}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

我有一个相对简单的问题,试图将内联脚本添加到React组件.到目前为止我所拥有的:

'use strict';

import '../../styles/pages/people.scss';

import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';

import { prefix } from '../../core/util';

export default class extends Component {
    render() {
        return (
            <DocumentTitle title="People">
                <article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
                    <h1 className="tk-brandon-grotesque">People</h1>

                    <script src="https://use.typekit.net/foobar.js"></script>
                    <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>
                </article>
            </DocumentTitle>
        );
    }
};

我也尝试过:

<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

这两种方法似乎都没有执行所需的脚本.我猜这是一件我想念的简单事.有人可以帮忙吗？

PS:忽略foobar,我有一个真正的ID实际上在使用,我不想分享.

我在处理facebook的ReactJS时遇到了麻烦.每当我执行ajax并想要显示html数据时,ReactJS会将其显示为文本.(见下图)

数据通过jquery Ajax的成功回调函数显示.

$.ajax({
   url: url here,
   dataType: "json",
   success: function(data) {
      this.setState({
           action: data.action
      })
   }.bind(this)
});

有没有简单的方法将其转换为HTML？我应该如何使用ReactJS？

我正在使用React构建一些东西,我需要在JSX中使用React Variables插入HTML.有没有办法让变量像这样:

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

并将其插入反应中,并让它工作？

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

并按预期插入HTML？我没有看到或听到任何关于可以执行此内联的react函数,或者解析可以使其工作的事物的方法.

我是React.js的新手,对不起,如果这个问题听起来太愚蠢了.

我正在尝试在输入字段为空时禁用按钮.React的最佳方法是什么？

我正在做类似以下的事情:

<input ref="email"/>

<button disabled={!this.refs.email}>Let me in</button>

它是否正确？

这不仅仅是动态属性的重复,因为我也很好奇将数据从一个元素传输/检查到另一个元素.

我正在尝试将jQuery组件转换为React.js,而我遇到的一个问题是基于for循环渲染n个元素.

我理解这是不可能的,或者推荐,并且如果模型中存在数组,则使用它是完全合理的map.那很好,但是当你没有阵列时呢？相反,你有数值等于要渲染的给定数量的元素,那么你应该怎么做？

这是我的例子,我想根据它的层次级别为一个元素添加任意数量的span标记.所以在第3级,我想在文本元素之前使用3个span标签.

在javascript中:

for (var i = 0; i < level; i++) {
    $el.append('<span class="indent"></span>');
}
$el.append('Some text value');

我似乎无法得到这个,或类似的东西在JSX React.js组件中工作.相反,我必须执行以下操作,首先将temp数组构建为正确的长度然后循环数组.

React.js

render: function() {
  var tmp = [];
  for (var i = 0; i < this.props.level; i++) {
    tmp.push(i);
  }
  var indents = tmp.map(function (i) {
    return (
      <span className='indent'></span>
    );
  });

  return (
    ...
    {indents}
    "Some text value"
    ...
  );
}

当然,这不是最好的,或唯一的方法来实现这一目标？我错过了什么？