使用Styles从连接的Redux组件获取引用 [英] Get ref from connected redux component withStyles

问题描述

我导出了一个工作组件:

I have this export of a working component:

export default connect(
    mapStateToProps, actions,
    null, { withRef: true, forwardRef: true }
  )(withTheme()(withStyles(styles)(MainMenu)));

及其调用:

<MainMenu 
  ref={(connectedMenu) => this.menuRef = connectedMenu.getWrappedInstance()} 
  user={user} 
/>

我期望获得MainMenu引用，但我一直在获取WithTheme对象.

I've expected to get a MainMenu ref, but I keep getting WithTheme object instead.

我也尝试通过innerRef，但是遇到以下错误:

I've also tried to get through innerRef, but got the following errors:

TypeError: connectedMenu.getWrappedInstance is not a function
TypeError: Cannot read property 'getWrappedInstance' of null

在进行所有尝试之前，我都尝试过React.createRef()格式，但是没有用.

Before all of that I've tried that React.createRef() format, but it didn't worked.

我如何获得此推荐?

推荐答案

假定您正在使用Material-UI的v4，则withTheme的语法不正确.在v4中，第一组括号已删除.

Assuming you are using v4 of Material-UI, your syntax for withTheme is incorrect. In v4 the first set of parentheses was removed.

代替

withTheme()(YourComponent)

您应该拥有

withTheme(YourComponent)

以下是 react-redux待办事项清单教程的修改版中的代码显示正确的语法.我在此处包括了我更改过的两个文件(TodoList.js和TodoApp.js)，但是沙箱是一个完全正常的示例.

Below is code from a modified version of the react-redux todo list tutorial that shows the correct syntax. I've included here the two files that I changed (TodoList.js and TodoApp.js), but the sandbox is a fully working example.

在TodoApp中，我使用TodoList上的ref获取并显示其高度.仅当TodoApp重新渲染时，显示的高度才会更新，因此我包含了一个触发重新渲染的按钮.如果将几个待办事项添加到待办事项列表，然后单击重新渲染"按钮，您将看到显示了列表的新高度(表明参考已完全正常工作).

In TodoApp, I use the ref on TodoList to get and display its height. The displayed height will only get updated if TodoApp re-renders, so I've included a button to trigger a re-render. If you add a couple todos to the todo list, and then click the re-render button, you will see that the new height of the list is displayed (showing that the ref is fully working).

在TodoList中，我正在使用withStyles在待办事项列表周围添加蓝色边框以显示withStyles正在工作，并且我正在显示主题的原色以显示withTheme正在工作.

In TodoList, I'm using withStyles to add a blue border around the todo list to show that withStyles is working, and I'm displaying the primary color from the theme to show that withTheme is working.

TodoList.js

import React from "react";
import { connect } from "react-redux";
import Todo from "./Todo";
import { getTodosByVisibilityFilter } from "../redux/selectors";
import { withStyles, withTheme } from "@material-ui/core/styles";
import clsx from "clsx";

const styles = {
  list: {
    border: "1px solid blue"
  }
};
const TodoList = React.forwardRef(({ todos, theme, classes }, ref) => (
  <>
    <div>theme.palette.primary.main: {theme.palette.primary.main}</div>
    <ul ref={ref} className={clsx("todo-list", classes.list)}>
      {todos && todos.length
        ? todos.map((todo, index) => {
            return <Todo key={`todo-${todo.id}`} todo={todo} />;
          })
        : "No todos, yay!"}
    </ul>
  </>
));

const mapStateToProps = state => {
  const { visibilityFilter } = state;
  const todos = getTodosByVisibilityFilter(state, visibilityFilter);
  return { todos };
};
export default connect(
  mapStateToProps,
  null,
  null,
  { forwardRef: true }
)(withTheme(withStyles(styles)(TodoList)));

TodoApp.js

import React from "react";
import AddTodo from "./components/AddTodo";
import TodoList from "./components/TodoList";
import VisibilityFilters from "./components/VisibilityFilters";
import "./styles.css";

export default function TodoApp() {
  const [renderIndex, incrementRenderIndex] = React.useReducer(
    prevRenderIndex => prevRenderIndex + 1,
    0
  );
  const todoListRef = React.useRef();
  const heightDisplayRef = React.useRef();
  React.useEffect(() => {
    if (todoListRef.current && heightDisplayRef.current) {
      heightDisplayRef.current.innerHTML = ` (height: ${
        todoListRef.current.offsetHeight
      })`;
    }
  });
  return (
    <div className="todo-app">
      <h1>
        Todo List
        <span ref={heightDisplayRef} />
      </h1>
      <AddTodo />
      <TodoList ref={todoListRef} />
      <VisibilityFilters />
      <button onClick={incrementRenderIndex}>
        Trigger re-render of TodoApp
      </button>
      <div>Render Index: {renderIndex}</div>
    </div>
  );
}

这篇关于使用Styles从连接的Redux组件获取引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！