javascript - 接力 Playground - 如何让它发挥作用？

Question

我在 Relay Playground 中更改了(架构中的“hello”为“text”)像这样:

架构:

import {
  GraphQLObjectType,
  GraphQLSchema,
  GraphQLString,
  GraphQLInt
} from 'graphql';

const GREETINGS = 
  {text: 'Hello world 1'}
;

const GreetingsType = new GraphQLObjectType({
  name: 'Greetings',
  fields: () => ({
    text: {type: GraphQLString}
  })
});

export default new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Query',
    fields: () => ({
      greetings: {
        type: GreetingsType,
        resolve: () => GREETINGS
      }
    })
  })
});

代码:

class HelloApp extends React.Component {
  render() {
    const {hello} = this.props.greetings;
    return <h1>test: {hello}</h1>;
  }
}

HelloApp = Relay.createContainer(HelloApp, {
  fragments: {
    greetings: () => Relay.QL`
      fragment on Greetings {
        text
      }
    `,
  }
});

class HelloRoute extends Relay.Route {
  static routeName = 'Hello';
  static queries = {
    greetings: (Component) => Relay.QL`
      query GreetingsQuery {
        greetings {
          ${Component.getFragment('greetings')},
        },
      }
    `,
  };
}

ReactDOM.render(
  <Relay.RootContainer Component={HelloApp} route={new HelloRoute()} />,
  mountNode
);

但它不起作用，我没有收到任何错误消息。没有任何渲染。当我将“文本”改回“你好”时，它会再次起作用。为什么？看起来架构是硬编码的？

编辑:

这有效(我知道为什么):

const sm = this.props.greetings;
return <h1>test: {sm.text}</h1>;

这也有效:

const {text} = this.props.greetings;
return <h1>test: {text}</h1>;

但是下面这个不起作用(我不知道为什么如果上面的有效，为什么不能使用自定义变量名称？上面的“text”变量名称具体是什么？):

const {sm} = this.props.greetings;
return <h1>test: {sm}</h1>;

已解决:

ES6 功能。花括号应包含属性。这就是 text 起作用的原因。谢谢@Vince Ning。

Answer 1

在你的 React 应用程序中，你正在解构你的 props，如下所示:

const {hello} = this.props.greetings;

由于greetings是一个JSON对象，因此您只检索了该对象的hello属性，而不是它的其余部分。为了获取正确的数据，您可以通过删除该语句中 hello 周围的 {} 来获取整个对象:

const hello = this.props.greetings;
console.log(hello.text); // Hello world 1

或者您可以将 {} 内的 hello 更改为文本以检索该特定属性，如下所示:

const {text} = this.props.greetings;
console.log(text); // Hello world 1

希望这有帮助!