有时减速器会变得混乱:

const initialState = {
    notificationBar: {
        open: false,
    },
};

export default function (state = initialState, action) {
  switch (action.type) {
    case actions.LAYOUT_NOTIFICATIONBAR_OPEN:
      return Object.assign({}, state, {
        // TODO: Find a cleaner way to do this!
        notificationBar: Object.assign({}, state.notificationBar, {
          open: true,
        }),
      });
    default:
      return state;
  }
}

是否有更简洁的方法来做到这一点？

问题

我收到这个警告:

警告:数组或迭代器中的每个子节点都应该具有唯一的"键"支柱.检查EventsTable的render方法.有关更多信息,请参见fb.me/react-warning-keys.

react-runtime-dev.js？8fefd85d334323f8baa58410bac59b2a7f426ea7:21998警告:数组或迭代器中的每个子节点都应该有一个唯一的"key"prop.检查Event的render方法.有关更多信息,请参见fb.me/react-warning-keys.

资源

这是EventsTable:

EventsTable = React.createClass({
  displayName: 'EventsTable',

  render() {
    console.dir(this.props.list);

    return (
      <table className="events-table">
        <thead>
          <tr>
            {_.keys(this.props.list[0]).map(function (key) {
              if (key !== 'attributes') {
                return <th>{key}</th>;
              }
            })}
         </tr>
        </thead>

        <tbody>
          {this.props.list.map(function (row) {
            return (
              <Event key={row.WhatId} data={row} />
            );
          })}
        </tbody>
      </table>
    )
  }
});

这是Event:

Event = React.createClass({
  displayName: 'Event',

  render() {
    return (
      <tr>
        {_.keys(this.props.data).map((x) => {
          if (x !== 'attributes')
            return <td>{this.props.data[x]}</td>;
        })} …

假设有一个我喜欢的React组件,但想要修改.对于此示例,我们将使用Material UI LinearProgress.我想用它制作一个可点击的搜索栏.

class SeekBar extends LinearProgress {
  componentDidMount() {
    super.componentDidMount();
    console.log('my stuff here');
  }
}

但我觉得,就改变render回报而言,我可以做的事情非常有限.不过,也许我会把这一切都搞错了.如果我喜欢特定的React组件,例如Material UI组件,那么自定义其外观和功能并使其成为我自己的好的,可重用的方法是什么？

如果我有一个需要一些设置的React组件(例如,对于定时器,或WebAudio API等),我无法确定初始化是否应该进入constructor或componentWillMount.两者都有任何优点或缺点吗？我不清楚哪一个更适合这个.

我用Google搜索了一下,看看有没有人讨论过和之间的差异constructor,componentWillMount但我找不到任何东西.

编辑:Redux和任何异步函数不应该是等式的一部分.

鉴于这样的状态:

state = {
  things: [
    { id: 'a1', name: 'thing 1' },
    { id: 'a2', name: 'thing 2' },
  ],
};

如何创建删除ID"a1"的新状态？推送新商品很容易:

return state.set(state.get('things').push(newThing));

但我无法弄清楚如何通过其id属性搜索和删除对象.我试过这个:

return state.set('tracks',
  state.get('tracks').delete(
    state.get('tracks').findIndex(x => x.get('id') === 'a2')
  )
)

但它似乎很乱,加上只有找到项目才有效,因为如果findIndex返回-1,那就是有效值delete.

给出来自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 />;

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

我知道使用ReactCSSTransitionGroup你可以将它应用到项目列表中,然后在它们出现或消失时进行动画处理.虽然单个组件怎么样？

请看这里的JSFiddle,当项目出现时,我有一个CSS动画.但是我不知道是否有办法让它在被隐藏时变得有生气.

https://jsfiddle.net/eq263rk2/

React Native是否具有与ActionSheetIOSAndroid 相同的功能？某种弹出菜单的选项可供选择？

我很好奇renderReact类中的两个方法的正确Flow注释是什么,以及return无状态函数中的简单s:

const UserProfilePage = () => {
  return <div className="container page">
    <UserProfileContainer />
  </div>
};

通过故意设置返回类型不正确(到一个数字),我得到了这个错误:

  8:   return <div className="container page">
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element: `div`
  8:   return <div className="container page">
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React$Element. This type is incompatible with the expected return type of
  7: const UserProfilePage = (): number => {
                                 ^^^^^^ number

因此,将代码更改为此似乎满足Flow:

const UserProfilePage = (): React$Element => {
  return <div className="container page">
    <UserProfileContainer />
  </div>
};

我想知道这是否正确,如果是的话,这会记录在哪里？

我一直在寻找一些.babelrc从转换代码中删除评论的选项,但我没有运气.我试过这个:

{
  "comments": false
}

以及

{
  "options": {
    "comments": false
  }
}

并且都不起作用.我没有想法,我无法在任何地方找到任何体面的文档.