相关疑难解决方法(0)

根据文档,"没有中间件,Redux商店只支持同步数据流".我不明白为什么会这样.为什么容器组件不能调用异步API,然后调用dispatch操作？

例如,想象一个简单的UI:字段和按钮.当用户按下按钮时,该字段将填充来自远程服务器的数据.

import * as React from 'react';
import * as Redux from 'redux';
import { Provider, connect } from 'react-redux';

const ActionTypes = {
    STARTED_UPDATING: 'STARTED_UPDATING',
    UPDATED: 'UPDATED'
};

class AsyncApi {
    static getFieldValue() {
        const promise = new Promise((resolve) => {
            setTimeout(() => {
                resolve(Math.floor(Math.random() * 100));
            }, 1000);
        });
        return promise;
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <input value={this.props.field}/>
                <button disabled={this.props.isWaiting} onClick={this.props.update}>Fetch</button>
                {this.props.isWaiting && <div>Waiting...</div>}
            </div>
        ); …

propsReact.js中是否有使用事件将子项传递给父项的简单方法？

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(event) {
    // event.component.props ?why is this not available?
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

我知道你可以使用受控组件来传递输入的值,但通过整个工具包n'kaboodle会很不错.有时,子组件包含一组您不必查找的信息.

也许有一种方法将组件绑定到事件？

更新 - 2015年9月1日

在使用React超过一年之后,在Sebastien Lorber的回答的推动下,我总结了传递子组件作为父母函数的参数实际上并不是 React方式,也不是一个好主意.我已经改变了答案.

我正在构建一个需要在某些情况下显示确认对话框的应用程序.

假设我想删除一些东西,然后我会调度一个动作,deleteSomething(id)因此一些reducer会捕获该事件并填充对话框减速器以显示它.

当这个对话提交时,我怀疑了.

• 该组件如何根据调度的第一个操作调度正确的操作？
• 动作创建者应该处理这个逻辑吗？
• 我们可以在减速机内添加动作吗？

编辑:

使它更清楚:

deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id)

createThingB(id) => Show dialog with Questions => createThingBRemotely(id)

所以我正在尝试重用对话框组件.显示/隐藏对话框不是问题,因为这可以在reducer中轻松完成.我想要指定的是如何根据左侧开始流动的动作从右侧调度动作.

许多模板语言都有"slots"或"yield"语句,允许进行某种控制反转,将一个模板包装在另一个模板中.

Angular有"transclude"选项.

Rails有收益率声明.如果React.js有yield语句,它将如下所示:

var Wrapper = React.createClass({
  render: function() {
    return (
      <div className="wrapper">
        before
          <yield/>
        after
      </div>
    );
  }
});

var Main = React.createClass({
  render: function() {
    return (
      <Wrapper><h1>content</h1></Wrapper>
    );
  }
});

期望的输出:

<div class="wrapper">
  before
    <h1>content</h1>
  after
</div>

唉,React.js没有<yield/>.如何定义Wrapper组件以实现相同的输出？

我观看了一个众所周知的视频,前苹果UI设计师Bret Victor在源代码中改变了一个符号之后,立即更新了运行代码,展示了令人惊叹的演示.

为了让那些没有看到或没有时间观看视频的人明白我的问题:我想使用这样的工具来编写我自己的软件.他演示的工具是否可用,还是有其他类似的工具？

无论哪种语言/环境都无关紧要,我只想让我的代码运行然后在源代码中更改一行,并立即看到更新的结果而不重新启动它.

该视频也可在YouTube上观看,关键点是:

• 03:30 - 05:30 - 实时编码图形算法(空间)
• 11:00 - 14:30 - 实时编码一些游戏代码(空格和时间)
• 17:30 - 21:30 - 实时编码局部变量(状态)

我正在研究反应生态系统,我来自AngularJS世界,我不知道应该使用哪种通量实现...

考虑到我喜欢angularjs(1x)的MV*结构,谁能解释什么是最好的？

我将重点关注:

1. 他们之间的差异
2. 目标
3. 学习曲线
4. 用法分享
5. 可测性
6. 可扩展性
7. 遵守新标准(包括ES6和Web开发趋势)

我找到了很多资源,但我还是有很多疑问!

提前致谢

我是反应灵的新手.我希望在两个独立组件之间进行通信.

这些组件没有任何父子关系.

我找到了这段代码.

我不知道如何使用它 https://medium.com/react-zine/how-to-communicate-between-components-in-react-cc1ee986523a

我想知道在 ReactJS 组件之间进行通信的推荐方式是什么。我看了一个相关的问题。但是，我没有找到足够的答案。关键方法似乎如下：

1. 假设只有孩子/父母交流。
2. parent 到 child 的通信是通过设置 props 来实现的，反之则是通过传递一个回调作为 props 来实现。

这有以下缺点：

1. 由于兄弟姐妹不能直接通信，所有必须在兄弟姐妹之间来回传递的状态都必须存储在他们共同的父级中。这意味着父级有很多它并不真正需要的状态。
2. 传递回调是相当不优雅的。

我想做的是向组件添加方法/成员以建立通信。我正在考虑RxJS 的思路。这将意味着以下内容：

1. 我接受通信超出了 ReactJS 处理的功能范围。无论如何，情况似乎如此。
2. 类的成员需要持久化。例如，父组件不应<Child />在每次调用其render函数期间创建新组件，因为在这种情况下，必须重新建立所有订阅。相反，构造函数必须创建一个this.child = <Child />对象并在render调用中渲染{this.child}。

我的问题是：组件通信是由 ReactJS 以某种方式处理的，还是应该由开发人员以其他方式处理？

在第一种情况下：ReactJS 中是否有一种可扩展且优雅的方式来实现组件之间的通信？ReactJS 开发人员的基本原理是按照上述方式完成的还是我遗漏了什么？

在第二种情况下：组件应该如何通信？

我在主页面上有一个表格,让我们说main.js,我想要的是表格的每一次点击都要我在抽屉里显示数据.谁知道如何实现这个目标？我跟着几个例子,但我做不到.

抽屉关闭时:

我喜欢把它展示在这个抽屉里.

但我的抽屉和我的表是单独的文件所以

这是我的代码:

class Main extends React.Component {

    render(){

        return (
            <Table multiSelectable={this.state.multiSelectable} 
                onRowSelection={this._onRowSelection}>

                <TableHeader>

                    <TableRow>

                        <TableHeaderColumn style={tablestyles.columns.id}>
                            ID
                        </TableHeaderColumn>
                        <TableHeaderColumn style={tablestyles.columns.name}>
                            Name
                        </TableHeaderColumn>
                        <TableHeaderColumn style={tablestyles.columns.price}>
                            Price
                        </TableHeaderColumn>
                        <TableHeaderColumn style={tablestyles.columns.category}>
                            Category
                        </TableHeaderColumn>
                        <TableHeaderColumn style={tablestyles.columns.edit}>
                            Edit
                        </TableHeaderColumn>

                    </TableRow>

                </TableHeader>

                <TableBody>

                {Data.tablePage.items.map(item =>
                    <TableRow key={item.id}>

                        <TableRowColumn style={tablestyles.columns.id}>
                            {item.id}
                        </TableRowColumn>

                        <TableRowColumn style={tablestyles.columns.name}>
                            {item.name}
                        </TableRowColumn>

                        <TableRowColumn style={tablestyles.columns.price}>
                            {item.price}
                        </TableRowColumn>

                        <TableRowColumn style={tablestyles.columns.category}>
                            {item.category}
                        </TableRowColumn>

                        <TableRowColumn style={tablestyles.columns.edit}>
                            <Link className="button" to="/form">
                                <FloatingActionButton zDepth={0}
                                    mini={true} backgroundColor={grey200}
                                    iconStyle= {tablestyles.editButton}>
                                    <ContentCreate  />
                                </FloatingActionButton>
                            </Link>
                        </TableRowColumn>

                    </TableRow>

                ) } …

我只是试图用文件的方法,如getElementsByClassName,getElementsByTagName,getElementById,,互相安慰的输出.然而奇怪的是,只有getElementById不工作,它记录null.我用App和TagName h1尝试过className,效果很好.任何人都可以阐明这一点吗？这是代码沙箱[ https://codesandbox.io/s/813mnx1vq2 ].

下面是我App正在渲染的代码,

function App() {

  { console.log(document.getElementById('heading1')) }

  /*
  { console.log(document.getElementsByTagName("h1")) }
  // Output: HtmlCollection array which contains element with id=heading1
  */

  /*
  { console.log(document.getElementsByClassName("App")) }
  // Output: HtmlCollection array which contains div.App element
  */

  return (
    <div  className="App">
      <h1 id="heading1">Hello CodeSandbox</h1>

      <h2>Start editing to see some magic happen!</h2>

    </div>
  );

}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

PS编辑: NodeList何时生效,何时是静态的？.感谢Jonas.