时间戳

首页 > 解决方案 > 使用 React，在使用 react-transition-group 时，在 StrictMode 中不推荐使用 findDOMNode 作为警告

reactjs - 使用 React，在使用 react-transition-group 时，在 StrictMode 中不推荐使用 findDOMNode 作为警告

问题描述

我正在使用包 react-transition-group，我尝试在 CSSTransition 组件上使用 nodeRef 道具，并在我的组件上添加了一个包装器，但我仍然收到有关 findDOMNode 的警告。

这是代码：

 <CSSTransition
        key={entry.id}
        timeout={500}
        classNames="timesheet-entry"
      >
          <TimesheetEntry
            taskOptions={taskOptions || []}
            deleteHandler={(event) => {
              deleteHandler(event, entry.id.toString());
            }}
            data={entry}
            dateChangeHandler={(date: Date) =>
              dateChangeHandler(date, entry.id)
            }
            hoursChangeHandler={(event) => hoursChangeHandler(event, entry.id)}
            taskCodeChangeHandler={(event, value) =>
              taskCodeChangeHandler(event, value, entry.id)
            }
          />
      </CSSTransition>

TimesheetEntry 组件的代码：

function TimesheetEntry(props: TimesheetEntryProps) {
  return (
    <div>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          label="Date"
          style={{ marginRight: '15px', height: '20px', marginTop: '-2px' }}
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          value={props.data.date}
          onChange={props.dateChangeHandler}
          size="small"
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />
      </MuiPickersUtilsProvider>

      <Autocomplete
        size="small"
        style={{
          width: 300,
          display: 'inline-block',
          marginRight: '15px',
        }}
        options={props.taskOptions}
        getOptionLabel={(option) => option.name}
        getOptionSelected={(option, value) => {
          return option.id === value.id && option.name === value.name;
        }}
        onChange={props.taskCodeChangeHandler}
        renderInput={(params) => (
          <TextField {...params} label="Task" variant="outlined" />
        )}
      />

      <TextField
        size="small"
        style={{ marginRight: '15px', height: '20px' }}
        label="Hours"
        type="number"
        inputProps={{ min: 0.5, step: 0.5 }}
        onChange={props.hoursChangeHandler}
        InputLabelProps={{
          shrink: true,
        }}
      />

      <Button
        style={{ marginRight: '15px' }}
        variant="contained"
        color="secondary"
        size="small"
        startIcon={<DeleteIcon />}
        onClick={props.deleteHandler}
      >
        Delete
      </Button>
    </div>
  );
}

export default TimesheetEntry;

我也在代码框here中做了一个有点类似的代码设置

我尝试通过我的 TimesheetEntry 组件上的 div 包装器添加 nodeRef 和 ref 引用，但这似乎使动画行为不正确（添加新条目可以正常工作，但是当我尝试删除条目时，动画似乎不起作用不再）。我也在寻找一种无需在 TimesheetEntry 组件上创建 div 包装器的方法。

标签： reactjsreact-transition-group

解决方案

findDOMNode在您的 CodeSandbox 演示中实际上有两个不同的警告：

  1. 当您第一次添加或删除一个条目时，它源于react-transition-groupfor的直接使用TimesheetEntry。

  2. 当您保存您的时间表时，这源于通过 Material UI 的组件的间接使用。react-transition-groupSnackbar

不幸的是，您无法控制后者，所以让我们修复前者；您正在管理转换TimesheetEntry组件的列表，但要正确实现nodeRef，每个元素都需要一个不同的 ref 对象，并且因为您不能在循环中调用 React 钩子（请参阅钩子规则），您必须创建一个单独的组件：

const EntryContainer = ({ children, ...props }) => {
  const nodeRef = React.useRef(null);
  return (
    <CSSTransition
      nodeRef={nodeRef}
      timeout={500}
      classNames="timesheet-entry"
      {...props}
    >
      <div ref={nodeRef}>
        {children}
      </div>
    </CSSTransition>
  );
};

您将环绕它TimesheetEntry：

const controls: JSX.Element[] = entries.map((entry: entry, index: number) => {
  return (
    <EntryContainer key={entry.id}>
      <TimesheetEntry
        deleteHandler={event => {
          deleteHandler(event, entry.id.toString());
        }}
        data={entry}
        dateChangeHandler={(date: Date) => dateChangeHandler(date, entry.id)}
        hoursChangeHandler={event => hoursChangeHandler(event, entry.id)}
        taskCodeChangeHandler={(event, value) =>
          taskCodeChangeHandler(event, value, entry.id)
        }
      />
    </EntryContainer>
  );
});

您说您已经尝试过这样的事情，但我怀疑您忘记将EntryContainer的道具转发到CSSTransition，这是至关重要的一步，因为那些正在被 传递TransitionGroup。

推荐阅读