小编cod*_*ter的帖子

我想创建一个渲染 SVG 路径元素的组件，如下所示：

class Path extends Component {
  constructor(props) {
    super(props);

    this.refCallback = this.refCallback.bind(this);
  }

  refCallback(element) {
    console.log("Element: ", element, element.getTotalLength());
  }

  render() {
    const { data, id } = this.props

    return (
      <path d={ data } id={ id } ref={ this.refCallback } />
    );
  }
}

我希望获取路径的 DOM 节点，然后对其使用“getTotalLength()”方法。但我在控制台中得到路径元素的以下输出：

Element: <path d="M11.859375,0.88671875 C9.10229798,32.1448978 3.72401281,62.1847019 0.921875,92.3632812" id="Path"></path>

对于“element.getTotalLength()”：

Uncaught TypeError: element.getTotalLength is not a function

我不知道为什么它会这样。我期望获取 DOM 元素并使用“getTotalLength()”。

有谁知道我做错了什么？

我正在尝试测试我的样式组件。因此我安装了jest-styled-components.

我想测试我的组件在单击后是否改变不透明度。

我试过了toHaveStyleRule。但它说：

Property not found: "opacity"

这是我的样式组件：

const ClueAnswer = styled.h3`
  transition: opacity 1s;
  transition-timing-function: ${props => props.reveal ? 'ease-out' : 'ease-in' };
  opacity: ${props => props.reveal ? 1 : 0};
  cursor: pointer;
`;
ClueAnswer.displayName = 'ClueAnswer';
export { ClueAnswer };

我在这里导入它：

// Vendor
import React, { Component } from 'react';
// Styled Components
import {
  ClueAnswer,
  ClueWrapper
} from '../style/general';

class Clue extends Component {
  constructor(props) {
    super(props);

    this.state = {
      reveal: false
    }; …

我使用Redux表单版本6.8.0.

我有一个表单组件,它通过"mapStateToProps"函数得到它的"initialValues".在第一次渲染时,一切都很好.

在我的表单配置之后:

const CategoryChangeForm = reduxForm({
  form: 'change-category',
  validate: newCategoryValidate,
  enableReinitialize: true
})(CategoryChange);

当我更改字段"类别"并且更新成功时,我从firebase接收新的更新值.我通过提到的"mapStateToProps"函数将此更新值传递给"initialValues":

function mapStateToProps(state, ownProps) {
    return {
    initialValues: { category: state.categories[ownProps.id].name, id: ownProps.id }
  };
}

我预计新值将应用于"类别"-Field组件.但它没有获得更新的价值.

我的"Field"组件的配置:

const fieldProps = {
  category: {
    name: 'category',
    type: 'text',
    placeholder: 'Bezeichnung',
    component: InputField
  },
  hidden: {
    name: 'id',
    type: 'hidden',
    component: 'input'
  }
};

这是我的表单组件:

export const CategoryChange = props => {
  const {
    color,
    message,
    handleSubmit,
    stateComponent
  } = props;

  console.log("Props: ", props);

  return …