标签: react-jsx

在React中,我可以使用defaultValue属性进行不受控制的文本输入.但是,复选框没有这样的属性(只有checked,这使得它被控制).我有一个包含大量复选框的巨大表单,但用户无法更改它们!可能我可以使用双向数据绑定mixin,但是文档建议不要使用它们,所以我被卡住了.

我期待基于字符串渲染组件.基本上,我希望找到JSX等效于JavaScript的动态函数名称能力(parent["childMethod"]).

所以,如果我有一个字符串,比如"<MyComponent />",我怎么能变成JSX并渲染？

我正在使用 React 生成一个相当庞大且复杂的 DOM 树结构，但我选择不使用 JSX（只是为了避免最终且不可避免地再次从 JSX 转换为 JS）。此 DOM 的某些部分将根据某些（if-else）条件生成或对用户可见。在另一种情况下，可能需要一个循环来生成一些 HTML 元素等等。

然而，我找不到任何好的 atricles 来解释没有 JSX 的 React。

因此，请指导和展示如何在没有 JSX 的情况下使用 ReactJS并使用工厂、类、组件等。

没有足够的文档来说明这一点。

一个来自React和JSX的新人的问题.可能有一个简单的答案,但我无法在任何地方找到它: - \

我有这个代码:

return (<div className='link-container' >
        <a href="tel: + {this.props.item.value}">{this.props.item.value}</a>
    </div>);

对我不起作用的是href值的连接.目前,生成的href值正是您所看到的,{this.props.item.value}不会替换为实际值,而是显示为字符串.我尝试了很多连接技巧,但似乎没有任何效果.我设法使其工作的唯一方法是将所有href值放在不同的变量中,如下所示:

var hrefValue = "tel:" + this.props.item.value;
return (<div className='link-container' >
            <a href={hrefValue}>{this.props.item.value}</a>
        </div>);

这个解决方案有效,但为这样的事情创建一个新的变量看起来有点奇怪.有更简单的方法吗？

谢谢!

我试图将1个节点作为另一个React组件的属性传递,如下所示:

  render: function() {
    return (
      <div>
        <div ref='statusCircle'></div>
        <Popover trigger={ this.refs.statusCircle }></Popover>
      </div>);
    );
  }

但是在Popover中,this.props.trigger为NULL.

我的代码有什么问题吗？

如何将node-ref作为属性传递给另一个React组件？

在我的 React 类中，我经常发现自己不得不使用条件逻辑来决定要渲染的内容。这种方法的问题在于它会导致大量冗余标记。下面是一个例子：

if(this.props.quotes) {
    return (
        <div className="card">
            <div className="item-1">{this.props.header}</div>
            <div className="item-2">Add content...</div>
            <i className="fa fa-quote-left"></i>
            <i className="fa fa-quote-right"></i>
        </div>
    );
}
else {
    return (
        <div className="card">
            <div className="item-1">{this.props.header}</div>
            <div className="item-2">Add content...</div>
        </div>
    );
}

两个 HTML 组件之间的唯一区别是，一个组件有两个额外的字体很棒的元素。理想情况下，您希望使用一些基本标记，并根据条件的结果向其附加内容。

我尝试了以下方法，将 HTML 内容放入数组中，并在满足条件的情况下推送额外的 HTML 元素this.props.quotes：

var cardContent = [
    <div className="item-1">{this.props.header}</div>, 
    <div className="item-2">Add content...</div>
];

if(this.props.quotes) {
    cardContent.push(<i className="fa fa-quote-left"></i>);
    cardContent.push(<i className="fa fa-quote-right"></i>);
}

return (
    <div className="card">
        {cardContent}
    </div>
);

这引入了一个新问题，主要是 React 抱怨数组中缺少 key props：

Warning: Each …

Unexpected token每当我使用'...'表示法运行jslint代码时,我都会收到错误.我正在使用grommet-toolbox for Grommet UI(以及React的UI/UX框架),所以当我运行gulp dev命令时出现此错误,因此无法编写如下代码:

return {...state, fetching: true}

(上面的代码在这个文件的第10行:https://github.com/learncodeacademy/react-js-tutorials/blob/master/5-redux-react/src/js/reducers/tweetsReducer.js)

如何解决这个问题？

在React/JSX中是否有办法检查用户的输入字符串是否为空？

Component.js

{((this.props.description.name ==" ")||(this.props.description.name.length==""))? 

当用户输入任何内容或空字符串长度为1个空格时,此条件有效,但如果空字符串长度超过1个空格,则失败.有没有JSX技巧检查这个或我应该在我的reducer中处理这个？

是否可以从React元素中获取HTML标记名称(从组件返回)？例如:

function Foo() {
    return <span>Hello</span>;
}

HTML标记名称将是span.我知道你可以查看typeReact元素的属性,但在SFC和普通组件之间变得非常困难,当组件深度相当大时更难.例如:

function Bar() {
    return <Foo />;
}

还是应该回来span.

我的React应用程序代码库中重复了以下模式：

const {items, loading} = this.props
const elem = loading
  ? <Spinner />
  : items.length
    ? <ListComponent />
    : <NoResults />

尽管这肯定比嵌套实际 if/else子句更干净，但我正在尝试拥抱更优雅和实用的模式。我已经读过有关使用Eithermonad之类的东西的信息，但是我为之付出的所有努力最终看起来都更加冗长，并且可重用性较低（鉴于我想记住以前的尝试，该伪代码可能无法正常工作） ：

import {either, F, isEmpty, prop} from 'ramda'
const isLoading = prop('loading')
const renderLoading = (props) => isLoading(props) ? <Spinner /> : false
const loadingOrOther = either(renderLoading, F)
const renderItems = (props) => isEmpty(props.items) ? <NoResults /> : <ListComponent />
const renderElem = either(loadingOrOther, renderItems)
const elems = renderElem(props)

我可以使用哪种模式更干燥/可重用？

谢谢！