Question

我和React一起工作了一段时间，我很高兴学习并采用Relay.js。我很难找到一种方法来保持组件在多个项目中可重用，并仍然使用Relay。我能够从继电器容器中分离组件。我认为这是正确的举动。请看下面。

反应组件

import React from 'react';
    class ItemList extends React.Component {
        createList(item) {

            return (
                <li id={item.node.id} key={item.node.id}>{item.node.name}</li>
            );
        }
        render() {
           let listValues = this.props.test.edges.map(this.createList);
            console.log(this.props.test);
            return (
                <div>
                    <h1>My List</h1>
                    <ul>
                        {listValues}
                    </ul>
                </div>
            );
        }
    }


    export default ItemList;

中继容器

import React from 'react';
import Relay from 'react-relay';
import ItemList from './ItemList.js';
    export default Relay.createContainer(ItemList, {
        fragments: {

        },
    });

当我开始了解有关接力的更多信息时，我开始看到

this.props.relay.getPendingTransactions(this.props.game)

和

this.props.relay.hasOptimisticUpdate(hidingSpot)

当在React组件的组件级别中使用Relay时，我看不到该组件如何仍然保持其可重用性？我还在学习接力方式。我不知道如何在样式指南和多个项目中使用组件（另一个不实现中继）。我可以在多个中继项目中使用一个组件但是就是这样。

还有其他人遇到过这个问题吗？当Facebook解释它时 https://facebook.github.io/relay/docs/thinking-in-relay.html 它们听起来好像组件从继电器松散耦合。我错过了什么？

Answer 1

React没有规定我们应该如何获取数据，因为它是一个UI框架。我们可以命令性地（例如，使用REST API）或声明性地（例如，使用中继）获取数据。如果您在React组件中使用特定于Relay的功能（例如，this.props.relay，mut），则您决定在应用程序中使用声明性数据提取并使用Relay来执行此操作。因此，不能在不使用Relay的项目中重用它们。这是使用框架的代价，恕我直言。

当Facebook在https://facebook.github.io/relay/docs/thinking-in-relay.html中解释它时，它们听起来好像组件从中继松散耦合。

了解 Relay如何解耦React组件非常重要。

Relay解决了React的特定问题。当我们有一个组件层次结构或树，并且父组件需要知道其子组件的所有数据要求时，就会出现问题。因为父组件必须将所有这些数据传递给props。当子组件的数据要求需要更改时，它会一直改变到父组件的级联效果。

Relay解决了这个问题，它使子组件可以独立地修改自己的数据需求，而无需在组件树中修改链。父组件只需要声明哪些子组件＆＃39;它涵盖的数据要求。因此，父母不需要知道组件的细节。

在中继项目中分离React组件

1 个答案: