4

所以我正在学习 react 并且正在努力真正清楚地了解所有 { ( } ) 在 JSX 中到底在做什么、在哪里、为什么以及如何做。

所以我最终在这里生成了这段代码：

            <Connect query={ graphqlOperation(ListEvents) }>
                { ( { data: { listEvents } } ) =>
                    <div> {
                    listEvents ? (
                        <ListView events={listEvents.items}/>
                        ) : (
                        <h3> Loading </h3>
                    )} </div>
                }
            </Connect>

我希望可以为我做的事情是，有什么不同的方式来重写它？希望更清洁？更简洁？更少 (){}？

我尝试过重写几种不同的方式，但最终破坏了它。

有办法吗？

4

4 回答 4

1

您可以将子函数重构为方法并将其用作子节点：

RenderList = ( { data: { listEvents } } ) => {
  if (listEvents) {
    return <ListView events={listEvents.items}/>
  }

  return <h3>Loading</h3>
}

render() {
  <Connect query={ graphqlOperation(ListEvents) }>
    <this.RenderList />
  </Connect>
}
于 2018-08-07T05:46:16.963 回答
1

所以，在这里你传递了一些对象x，说它包含一个名为“数据”的对象。在data对象中，你有一个名为 的键listEvents。

您正在listEvents使用 ES6 中引入的扩展运算符获取密钥，它不是 JSX。

此外，您正在检查调用的键listEvents是否具有值。如果该值存在，则在 JSX 中使用三元运算符pass the value显示。spinner

如果您可以分享您想要实现相同的地方，我可以提供帮助。

于 2018-08-07T05:22:37.197 回答
1

如果你用 Javascript反编译代码，它看起来像这样

React.createElement(
    Connect,
    { query: graphqlOperation(ListEvents) },
    function (_ref) {
        var listEvents = _ref.data.listEvents;
        return React.createElement(
            "div",
            null,
            " ",
            listEvents ? React.createElement(ListView, { events: listEvents.items }) : React.createElement(
                "h3",
                null,
                " Loading "
            ),
            " "
        );
    }
);

细节

当您查询时，graphqlOperation(ListEvents)它会导致回调function (_ref)

然后你listEvents从回调结果中得到 -

var listEvents = _ref.data.listEvents;

其余的检查是否listEvents有数据，然后在组件中使用它。

你可以用在线babel 编译器试试

于 2018-08-07T05:30:17.813 回答
1

我假设你对这条线不知所措：

{ ( { data: { listEvents } } ) =>   
    ....  
}

所以这基本上是一个 JSX 表达式，它包含一个箭头函数：

{  (object) =>   
    ... we omit the {} cause it's returning a single value (the <div>)
}

一旦我们弄清楚了，让我们看看对象解构。你的论点object有属性data，而后者又是属性listEvents。我们这样解构：

// The 3 statements below are the same

(object) => { /* do something with `object.data.listEvents` */ }

({ data }) => { /* do something with `data.listEvents` */ }

({ data: { listEvents } }) => { /* do something with `listEvents` */ }

所以你有它。

于 2018-08-07T05:40:36.230 回答