1

コンポーネントを 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,
      }
    `,
  }
});
4

1 に答える 1

3

次のいずれかを行わずにこれを静的に取得する方法はないと思います。

代替案 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: 実行時に参照を介してアクセスする

コンテナがマウントされ、それへの参照があると、「コンポーネント」参照を介して元のコンポーネントを取得できます。これは文書化されていないため、将来の動作が保証されないことに注意してください。

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

明らかに、これは 3 つの選択肢の中で最もハックなので、おそらくお勧めしません。

于 2015-10-25T17:04:27.083 に答える