Question

我在Relay Playground中更改了（“hello”到架构中的“text”），如下所示：

SCHEMA：

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
      }
    })
  })
});

CODE：

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
);

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

编辑：

这有效（我知道原因）：

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应用程序中，您正在将您的道具解构为：

const {hello} = this.props.greetings;

由于问候语是一个JSON对象，因此您只检索该对象的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

希望这有帮助！

接力游乐场 - 如何让它发挥作用？

1 个答案: