标签: react-jsx

我想构建一个有两种状态的应用程序; 暂停和活跃.例如,我想禁用所有子/拥有组件的事件,如onClick,onChange,onKeyDown,.etc.

我曾想过isActive=false通过它所有的孩子/拥有的组件给予道具,并isActive在事件处理程序上检查属性.如果isActive属性是假的事件处理程序将什么都不做.我可以使用简单的辅助函数使这个机制更容易.但我担心的是,当我将应用程序状态更改为暂停时,所有子组件都需要重新呈现.

我正在寻找绕过所有事件处理程序(而不是自定义处理程序)而不重新渲染所有组件的方法.

更新:我看到在chrome端渲染矩形它不会重新渲染孩子.但如果有更好的反应方式,我想学习它.

我正在使用Webpack和React JSX.我的应用程序中有一个部分,其中包含很多来自设计师的静态内容.他们通常会向我发送一个HTML文件,其中包含我需要发布的内容.

目前,我正在手动将这些HTML转换为JSX(通过危险地设置HTML).

问题:Webpack中是否有一个加载程序会自动将HTML文件转换为React JSX？

我喜欢React的一个方面是将模板和视图代码放在同一个文件中(没有字符串连接).有没有办法在Backbone中做类似的事情？所以:

var MyView = Backbone.View.extend({
  render() {
    return (
      <div>blah blah</div>
    );
  }
});

我相信我在这里错过了一些相当简单的东西.然而,仍然很难搞清楚.

我正在尝试findItem在url输入值更改时执行该函数.使用下面的代码,我在Chrome中收到此警告:

Warning: Failed propType: Invalid prop `onChange` of type `string` supplied to `ReactDOMInput`, expected `function`. Check the render method of `ItemForm`.

这是相关的代码:

ItemForm = React.createClass({
  findItem(event) {
    console.log(event.target.value);
  },
  render() {
    return (
      <tfoot>
        <tr className="ui form">
          <td>
            <div className="field">
              <label>Product URL</label>
              <div className="ui active small inline invisible loader"/>
              <input className="url" onChange="{this.findItem}" placeholder="Enter the URL of the product you wish to purchase" type="text"/>
            </div>
          </td>
          <td className="numeric">
            <div className="field">
              <label>Quantity</label>
              <input className="qty" disabled="disabled" type="text"/>
            </div> …

如何在jsx中使用渲染中使用JavaScript变量而不是节点名？像这样的东西:

var First = React.createClass({
  render: function() {
    var nodeName = this.props.node; // this.props.node = 'Second';
    return <{nodeName}/>;
  }
});
var Second = React.creactClass({/*...*/});

我正在关注React教程,作者有一些代码,如:

<li key={`note${note.id}`}>
        <Note task={note.task} />
      </li>

但是,如果您只是这样做,相同的代码也可以:

  <li className="note" key={note.id}>
                <Note task={note.task}/>
            </li>

在第一个例子中,在实际note.id之前`note $的目的是什么？两者都有效,只是好奇为什么会这样.

我有一个关于使用react的问题.从标题中可以看出,我想知道是否可以在"dangerouslySetInnerHTML"属性中使用React组件(由React.createClass创建).我试过了,但React打印的代码没有像这样的转换:

const MySubComponent = React.createClass({
    render() {
        return (<p>MySubComponent</p>);
    }
});

...

let myStringHTML;
myStringHTML += "<ul>";
myStringHTML += "    <li>";
myStringHTML += "        <MySubComponent />";
myStringHTML += "    </li>";
myStringHTML += "</ul>";

const MyComponent = React.createClass({
    render() {
        return (
            <div dangerouslySetInnerHTML={{__html:myStringHTML}}></div>
        );
    }
});

我期望

<ul>
    <li>
        <p>MySubComponent</p>
    </li>
</ul>

但代码与原始字符串相同,这意味着React不会转换MySubComponent.

有没有办法解决这个问题？上面的例子很简单,但我的实际代码非常复杂.非常感谢gimme一只手;)

在React Native中，我有两个<TextInput/>，一个接收MM / YY，另一个接收16位卡号。

在MM / YY的第一个输入中，我有：

  <TextInput
    onChangeText={this._handlingCardExpiry.bind(this)}
    placeholder='MM/YY'
    value={cardExpiry}
  />

对于16位数字的卡号：

  <TextInput
    onChangeText={this._handlingCardNumber.bind(this)}
    placeholder='0000 0000 0000 0000'
    value={cardNumber}
  />

为期满，我试图将它们拆分并存储为value属性${cardMonth}/${cardYear}，但该文本甚至不这样，并且在卡号输入中每4位数字后添加空格会导致文本不会出现在输入中。

什么是使用<TextInput />的onChangeText和value属性处理以下内容的正确方法：

1. 当用户开始输入时<TextInput/>，/在中间显示a ，输入的前两位数字将出现在之前，而后两位则出现在/后面。
2. 用户开始输入16位数字的卡号时，每输入4位数字后会自动放置空格。

在此先感谢您，并会投票/接受答案。

我可以

<p>Company: {{this.state.user.company}}</p>

但是有时候公司没有价值。那么我应该如何隐藏整个

公司财产是否为空？

我试过了

<p>({this.state.user.company} ? 'Company: ' + {this.state.user.company} : '')</p>

但这是行不通的。

我正在尝试从数组中渲染多个图像,将其作为属性传递给"Image"组件.但是,无论出于何种原因,我想呈现的本地图像都没有显示出来.如果我加载托管在Web地址的图像,则会显示该图像,表示传递给Image组件的"imageSource"属性没有任何问题.我尝试过使用源格式,如下所示:

let source = 'require(./img/' + props.imageSource + ")";

或尝试:

<img src={{uri: source}} role="presentation" style={style.image} />

......但我所做的一切都没有任何区别.

该组件如下所示.我完全陷入困境,所以非常感谢帮助!

import React from 'react';

let Image = function statelessFunctionComponentClass(props) {

  let source = './img/' + props.imageSource;

  const style = {

    image : {

      width: '400pt',
      height: '400pt'
    }
  }

  return (

    <img src={source} role="presentation" style={style.image} />
  )
}

export default Image