从反应中继容器中获取组件

Question

如何从 React Relay Container 获取组件以获取静态变量？

从 './pages/home' 导入主页；

console.log(Home.route) // 未定义

我需要类似 Home.Component.route // 对象

class Home extends React.Component {
  static route = {
    component: Home,
    route: HomeRoute,
    leftButton: false,
    sideMenu: false,
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>
          Home
        </Text>
        <Text>
            {this.props.greetings.hello}
        </Text>
      </View>
    );
  }
}

export default Relay.createContainer(Home, {
  fragments: {
    greetings: () => Relay.QL`
      fragment on Greetings {
        hello,
      }
    `,
  }
});

Answer 1

如果不执行以下操作之一，我认为没有办法静态地解决这个问题。

备选方案 1：添加被包装组件的显式 export

// In "Home.js":
export class HomeComponent extends React.Component {
  static route = {
    // ...
  }
}

export default Relay.createContainer(HomeComponent, {
  // ...
});

// In "Other.js":
import Home, {HomeComponent} from './Home.js';

console.log("should have access here", HomeComponent.route);

备选方案 2：在导出前向容器添加属性

const HomeContainer = Relay.createContainer(
  // ...
);

HomeContainer.route = {
  // ...
};

export default HomeContainer;

备选方案 3：在运行时通过 refs 访问

一旦容器被挂载并且你有一个对它的引用，你就可以通过“组件”引用获取原始组件。请注意，这没有记录在案，因此不保证将来会起作用。

// In "Other.js":
render() {
  return (
    <Home
      ref={
        container => (
          console.log(container.refs.component.route)
        )
      }
    />
  );
}

显然，这是三个替代方案中最骇人听闻的，所以我可能不会推荐它。