Question

我知道反应组件可以通过两种方式创建，＆＃34;扩展React.Component＆＃34;或者只是下面组件中的对象。我的问题是，在第二种方式中它是如何工作的，在示例中＆＃34; const ChannelsList =（{data：{loading，error，channels}}）＆＃34;

如果我更改了namme＆＃39;频道＆＃39;对于数据＆＃39;中的xchannels对象，然后我用来尝试这个新的变化＆＃34; xchannels.map（...）...）＆＃34; ，页面给出错误：

ChannelsListWithData.js:24 Uncaught TypeError: Cannot read property 'map' of undefined
    at ChannelsList (ChannelsListWithData.js:24)
    at StatelessComponent.render (ReactCompositeComponent.js:44)
    at ReactCompositeComponent.js:795
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:794)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:821)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:745)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546)
ChannelsList @ ChannelsListWithData.js:24
StatelessComponent.render @ ReactCompositeComponent.js:44
(anonymous) @ ReactCompositeComponent.js:795
measureLifeCyclePerf @ ReactCompositeComponent.js:75
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:794
  ....

它就像函数不接受任何变量名。为什么？

它如何工作在反应那个对象，以及参数和名称的名称，有一个链接可以理解吗？像php这样的经典程序语言很简单：函数（参数）

组件：

import React from 'react';
import {
  Link
} from 'react-router-dom'

import {
    gql,
    graphql,
} from 'react-apollo';

import AddChannel from './AddChannel';

const ChannelsList = ({ data: {loading, error, channels }}) => {
  if (loading) {
    return <p style={{color:"red"}}>Loading ...</p>;
  }
  if (error) {
    return <p>{error.message}</p>;
  }

  return (
    <div className="channelsList">
      <AddChannel />
      { channels.map( ch =>
        (<div key={ch.id} className={'channel ' + (ch.id < 0 ? 'optimistic' : '')}>
          <Link to={ch.id < 0 ? `/` : `channel/${ch.id}`}>
            {ch.name}
          </Link>
        </div>)
      )}
    </div>
  );
};

export const channelsListQuery = gql`
  query ChannelsListQuery {
    channels {
      id
      name
    }
  }
`;

export default graphql(channelsListQuery, {
  options: { pollInterval: 10000 },
})(ChannelsList);

该组件来自本教程：

https://dev-blog.apollodata.com/tutorial-graphql-input-types-and-client-caching-f11fa0421cfd

Answer 1

它没有任何问题。

经典编程语言（如JavaScript）也可以正常工作。

与php进行侧面比较，代码工作原理相同:)

在此示例中，data是一个同时具有match和const ChannelDetails(parameters) { const { data, match } = parameters ... // Classic way (like php I presume) const data = parameters.data const channel = parameter.data.channel }属性的对象。

您可以轻松将其翻译为：

parameters

更进一步，我建议你阅读JavaScript中的对象解构。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

您还问过：'参数如何运作？？'

这些<ChannelDetails data={{ channel: [], loading: false, error: '' }} match={"value here"} />是您渲染时发送的组件道具。例如：

<ListView>
    <ListView.Items>
        <Label Content="123"/>
        <TextBox Text="ABC"/>
        <CheckBox Checked="True"/>
    </ListView.Items>                    
</ListView>

创建反应组件为apollo客户端，简单模型与对象参数

1 个答案: