标签: react-jsx

我正在试验React.js,它工作得非常好.我想知道是否有可能将类注入其他类,如下所示:

var Container = React.createClass({
    render: function() {
      <{this.props.implComponent}/>
    }
});

假设implComponent已经像这样传递:

React.render(
  <Container implComponent="somePredefinedVariable" />,
   document.getElementById('content')
);

由于语法错误,这不起作用.我很容易理解为什么.

换句话说,我想根据名称将类注入其他类.这可能吗？我怎样才能做到这一点？

在以下代码的第4行,ESLint给我一个解析错误说:

意外的令牌=

我想知道为什么会这样？代码运行正常.我究竟做错了什么？

import { Component, PropTypes } from 'react';

export default class MainApp extends Component {
  static propTypes = {
    children: PropTypes.any.isRequired
  }

  componentWillMount() {
    require('./styles/main.styl');
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

我正在尝试删除Emmet围绕props.onInitiateBattle自定义属性值生成的引号onClick.

我的输入(然后CTRL + E展开,类似于制表符):
button.btn[type="button"][onClick={props.onInitiateBattle}]

Emmet的输出:
<button className="btn" type="button" onClick="{props.onInitiateBattle}"></button>

注意props.onInitiateBattle引用,这是不好的.

我期待什么(道具......没有引号):
<button className="btn" type="button" onClick={props.onInitiateBattle}></button>

将它包裹在双支架周围也不起作用.

我有一个具有data-icon属性的组件.例如,此属性的值应该是&#xf00fcss可以通过它呈现它content: attr( data-icon );.

然而,无论我尝试什么:React继续逃避&.即使我提供了正确的unicode角色\u0026#xf00f.

有没有办法阻止React搞乱这个价值？除了危险地设置内部html,因为我不想添加另一个包装器.

零件

define( [ 'react', 'util' ], function( React, Util )
{
    return React.createClass(
    {
        render: function()
        {
            //var amp = '\u0026',
            var amp = String.fromCharCode( 38 ),    
            // Util.icons[x] returns a String, such as "f00f"
            code = amp + '#x' + Util.icons[this.props.name] + ';';

            return (
                <i data-icon={code}>
                    {this.props.children ? <span>{this.props.children}</span> : null}
                </i>
            );
        }
    } );
} );

用法

<Widget.Icon name="add" /> …

我在React面临一个非常讨厌的行为.我想使用上传从父组件到子组件的上下文getChildContext.只要我不在{this.props.children}渲染功能中使用,一切正常.如果我这样做,则子组件的上下文未定义.

我附加了一个重现此行为的代码示例.我无法弄清楚为什么bar组件的上下文字段Baz是undefined.

var Baz = React.createClass({
 contextTypes: {
   bar: React.PropTypes.any
 },
 render: function() {
   console.log(this.context);
   return <div />;
 }
});

var Bar = React.createClass({
 childContextTypes: {
   bar: React.PropTypes.any
 },

 getChildContext: function() {
   return {
     bar: "BAR"
   };
 },

 render: function() {
   return (<div>{this.props.children}</div>);
 }
});

var Foo = React.createClass({
 render: function() {
   return <Bar>
      <Baz />
   </Bar>;
 }
});

console.log(React.version);

React.render(<Foo />, document.body);

控制台输出:

Warning: owner-based and parent-based contexts differ …

如何在JSX中呈现不确定的复选框？

这是我尝试过的:

render() {
  return <input type="checkbox" 
                checked={this.props.state === "checked"} 
                indeterminate={this.props.state === "indeterminate"} />
}

但是,indeterminate不是属性HTMLElement,而是属性.如何从React/JSX设置属性？

我正在使用React with Redux和Material UI来构建一个webapp.webapp由多个页面和组件组成.我知道快餐栏或对话框应该与用户正在做的事情直接相关.但是,我想让小吃栏和对话框独立于页面和组件.因此,用例是显示消息background synchronization of your data failed和操作retry now.我的想法是在名为的页面上呈现快餐栏,该页面RootFrame用于包装所有其他页面并将快餐栏的文本作为操作的有效负载进行分派.

我的Redux动作展示了一个小吃吧:

export function showSnackbar(message: string) {
  return {
    type: SHOW_SNACKBAR,
    payload: message
  };
}

当然,在动作中指定消息而不是将消息作为参数也可能是好的,但这不是我现在的问题.问题是:如何使用此系统并显示带有操作的快餐栏？我可以将我的动作更改为

export function showSnackbar(message, action) {
  return {
    type: SHOW_SNACKBAR,
    payload: {
      message, 
      action
    }
  };
}

和渲染我的小吃吧在RootFrame像

<Snackbar
  message={this.props.message}
  ref='snackbar'
  onDismiss={() => this.props.dispatch(dismissSnackbar())}
  action='retry now'
  onActionTouchTap={() => this.props.dispatch(this.props.action)}
/>;

当小吃棒被解雇时,动作会改变状态中的变量:snackbar.visible = false.这用于激活零食栏(它在何时呈现snackbar.visible === true).当用户单击时retry now,应调度启动同步的操作(作为props传递给组件).使用对话框时问题非常相似.因此,不仅要显示的文本而且还必须将下一个可能的操作传递给组件.

您是否认为使用Redux这样可以,还是有更好的解决方案？

问题:

在React中,您希望通过映射数组来创建DOM结构,但数组中的每个项应返回2个元素.例如

import React from 'react'
import _ from 'lodash'

let { Component } = React

export default class DataList extends Component {
  render () {
    let array = [
      {def: 'item1', term: 'term1', obj1: 'rand'}, 
      {def: 'item2', term: 'term2'}
    ]
    return (
      <dl>
        {_.map(array, (item) => {
          return (
            <dt>{item.def}</dt>
            <dd>{item.term}</dd>
          )
        })}
      </dl>
    )
  }
}

React不允许你渲染兄弟姐妹而不将它们包装在容器元素中,这会破坏DOM结构.

假设我有以下样式:

const styles = StyleSheet.create({
padding: {
  padding: 10
},
margin: {
  margin: 10
}
});

我想将它们都应用到反应组件中？

有没有办法为JSX中呈现的组件指定类型参数？

例如,考虑以下组件:

interface SelectorProps<T> {
    selection: T;
    options: T[];
}

class Selector<T> extends React.Component<SelectorProps<T>, {}> {
    // ...
}

如果我尝试在JSX中呈现此组件:

<Selector selection="a" options={["a", "b", "c"]} />

我收到这些错误:

TS2322:类型'string'不能分配给'T'类型.

TS2322:类型'string []'不能分配给'T []'.类型'string'不能分配给'T'类型.

我希望T被推断为string,否则一些方法来指定T=string在<Selector>.有解决方案吗？

我发现的唯一解决方法是扩展组件以消除所有类型参数:

class StringSelector extends Selector<string> { }