1

目标是控制其他应用程序,我已经从 redux 商店获取数据。但我想看看哪个组件使用 Redux 商店的哪个字段。让我举例说明:

目标应用

const App = props => (
      <React.Fragment>
          <AppComponents/>
          <MyImportedComponent dispatch={props.dispatch} state={props.state} />
      </React.Fragment>
    );
const mapStateToProps = state => ({ state });
export default connect(mapStateToProps)(App);

在这个例子中,我已经可以控制应用程序,但是我看不到哪些组件与 Redux 存储中的哪个字段相关。所以我只有在调度动作和更新商店时才能意识到这一点。

我可以从以下应用程序中访问一些数据吗?

{
  AppComponent: {
    connect: {
      mapStateToProps: [{
        ...someFieldsJustHere
      }]
    }
  },
  AnotherComponent: {
    ...somethingSimilarToPreviousOne
  }
}

我已经尝试使用 HOC 和装饰器,但我无法访问此类数据。现在玩react-test-renderer和嘲笑商店。

更新:

react-test-rendered可以访问组件道具,包括来自connectHOC 的道具,但现在我还不知道如何从 DOM 树中获取对真实组件的引用。

例子

const component = renderer.create(
  <Root>
    <App />
  </Root>
);

console.log('rendered: ', component.toTree());

但它只是对 DOM 树的模拟。 我仍然不知道如何在真实的 DOM 树中获取对相同组件的引用((

有任何想法吗?))

4

0 回答 0