小编Dmi*_*dov的帖子

是否有推荐的模式在React中将道具传递给后代组件？

下面,我将道具callback传递给子组件:

Master = React.createClass({
  render: function() {
    return (
      <div>
        <ListComp items={this.props.items} callback={this.handleClick} />
      </div>
    );
  }
});

ListComp = React.createClass({
  render: function() {

    this.props.items.forEach(function(item) {
      items.push(<ItemView item={item} callback={this.props.callback} />);
    }, this);

    return (
      <ul>{items}</ul>
    );
  }
});

然后callback道具传递给后代组件:

ItemComp = React.createClass({
  render: function() {
    return (
      <li><a onClick={this.handleClick} href="#">Link</a></li>
    );
  },

  handleClick: function(e) {
    e.preventDefault();
    this.props.callback();
  }
});

将支柱两次传递给这样是正确的还是我应该以某种方式引用它的继承？

我transferPropsTo在docs中看到了一个方法,并且通过记录它看起来我可以callback从后代通过this.props.__owner__.props但是那些双重下划线让我认为我不应该.

给出来自React文档的示例代码:

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

我做了一些调查...props实际评估的内容,这是:

React.__spread({}, props)

反过来评估为{foo: x, bar: y}.

但我想知道的是,为什么我不能这样做:

var component = <Component props />;

我不明白传播运营商的意义.

我是一个noobie at React,我正在努力做一个Bootstrap下拉列表.我附加的html在这里:

<ul class="dropdown-menu" id="dropdown">
</ul>

以下是我想在我的render方法中插入我的html:

render: function() {
  return (
      <li><a href="#books">Books</a></li>
      <li><a href="#podcasts">Podcasts</a></li>
      <li><a href="#">Tech I Like</a></li>
      <li><a href="#">About me</a></li>
      <li><a href="#addBlog">Add a Blog</a></li>
    );
}

但当然我只能归还一个元素.这样做的正确方法是什么React？我怎么能<li>在这样的下拉列表中添加多个？我尝试将整个东西包裹起来<div>,但这会弄乱我的CSS.

我最近一直在研究React并且希望使用JSX和打字稿.我无法找到有关此内容的任何资源或React的类型定义.

你可以在JSX中使用Typescript并且可以使用类型定义吗？

我正在尝试用JSX标签替换字符串的一部分,如下所示:

render: function() {
    result = this.props.text.replace(":",<div className="spacer"></div>);
    return (
         <div>        
             {result}
         <div>        
    );
}

但考虑到this.props.text就是Lorem : ipsum,它导致

<div>
    Lorem [object Object] ipsum.
</div>

有没有办法解决这个或其他方式用JSX标签替换字符串的部分？

我正在尝试使用我在React-Native中制作的通用导航组件.在调用时我想设置导航栏色调,标题等.

导航条形码:

var NavigationBar = React.createClass({
    render: function(title, titleColor, NavBarColor) {
        var titleConfig = {
            title: title,
            tintColor: titleColor,
        };

        return (
            <NavBar
                title={titleConfig}
                tintColor={NavBarColor}
                leftButton={<Button style={styles.menuButton}>&#xf0c9;</Button>}
                rightButton={<Button style={styles.menuButton}>&#xf07a;</Button>} />
        );
    }
});

将其应用于其他页面:

<NavigationBar title="Categories" titleColor="#ffffff" NavBarColor="#f0b210"/>

怎么做得好？提前致谢.

我正在开发的网站使用Microdata(使用schema.org).当我们将开发转移到使用React来渲染我们的视图时,我遇到了一个阻止程序,其中React只会在HTML规范中呈现属性,但Microdata指定了自定义属性,例如itemscope.

由于我是比较新的反应,还没有机会充分了解的核心,只是还没有,我的问题是什么将是扩展react.js的功能,允许自定义特性,例如,微观数据的最佳方式？

有没有一种扩展属性/道具解析器的方法,或者它是一个mixin的工作,它检查所有传递的道具并直接修改DOM元素？

(希望我们能够为每个人提供一个扩展,以便在解决方案明确时为此提供支持.)

我已经在其他几个组件中编写了这段代码,但似乎无法理解为什么这不起作用.

{
    this.props.children.map(function(child) {
        return <li>{child}</li>
    })
}

任何帮助将不胜感激!

在Redux的入门视频中,我们看到Footer(一个哑组件)使用Filterlink(一个容器).

但是当我读到这篇文章时,似乎(但不是很清楚)只有容器应该使用/渲染容器.

对我来说,如果Footer使用Filterlink(与Redux绑定),我不能在其他不使用Redux的项目上重复使用它.但也许这是一个例外？也许硬编码哑组件仅用于一个项目是可以的吗？

我错过了什么吗？

我的状态是:

[
  {type: "translateX", x: 10},
  {type: "scaleX", x: 1.2}
]

我正在使用双向绑定助手,我无法提供有效的密钥字符串linkState:

this.state.map(function(item, i) {
  return <div><input valueLink={this.linkState( ??? )}></div>
}

如果this.linkState接受一些查询语法会很好,例如从我的示例中"0.type"检索 "translateX".

有没有解决方法？

我编写了DeepLinkState mixin,它是React.addons.LinkedStateMixin的直接替代品.用法示例:

this.state.map(function(item, i) {
  return <div><input valueLink={this.linkState([i, "x"])}></div>
}

linkState("0.x") 也是可以接受的语法.