Question

因此，我正在学习反应，并为真正清楚地了解{（）}在JSX中的位置，原因和方式所做的努力。

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

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

我希望可以为我做些什么，另一种重写方式是什么？希望更清洁？更简洁？（）{}更少？

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

有办法吗？

Answer 1

因此，您在此处传递了一个说x的对象，其中包含一个称为“数据”的对象。在data对象中，您具有称为listEvents的钥匙。

您正在使用ES6中引入的散布运算符（不是JSX）获得密钥listEvents。

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

如果您可以分享自己想要达到的目标，我可以提供帮助。

Answer 2

如果您decompile使用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 compiler

进行尝试

Answer 3

我认为您对这一行不知所措：

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

因此，这基本上是一个JSX表达式，其中包含一个箭头函数：

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

弄清楚这个数字后，我们来看看object destructuring。您的参数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` */ }

所以你有它。

Answer 4

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

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

  return <h3>Loading</h3>
}

render() {
  <Connect query={ graphqlOperation(ListEvents) }>
    <this.RenderList />
  </Connect>
}

从我的JSX中获取一些{{{}）（）（}

4 个答案: