如何从另一个组件自定义输入组件？

Question

对于此输入组件，我想将其作为其他组件的基本组件。

import React, { InputHTMLAttributes } from "react";
import styled, { css } from "styled-components";

export const TextField: React.FC<InputHTMLAttributes<HTMLInputElement>> = (
  props
) => {
  return (
    <Input type="text" {...props} />
  );
};

const Input = styled.input`
  ${({ theme }) => css`
    width: 100%;
    color: ${theme.color.text};
  `}
`;

这是一种定制的样式，并添加了一些样式：

import React from "react";
import styled, { css } from "styled-components";
import { TextField } from "~/components";

export type ProductFieldProps = {
  name: string;
  value?: string;
};

type ProductFieldTypeProps = {
  textAlign: string;
};

export const ProductField: React.FC<ProductFieldProps> = ({
  name,
  value,
}) => {
  return (
    <StyledTextField textAlign="center">
      <TextField name={name} value={value} />
    </StyledTextField>
  );
};

const StyledTextField = styled(TextField)`
  ${({ theme }) => css<ProductFieldTypeProps>`
    &:hover {
      border-color: ${theme.color.hover};
    }
  `}
`;

使用新的组件productfield时，

# pages/index.tsx
import { ProductField } from "~/components";

...
return {
  <>
    <ProductField name="aaa" value="bbb" />
  </>
}

我遇到了一个服务器错误：

错误：输入是一个void元素标签，不得有richy也不使用dangesslySetInnerhtml。

如何正确设置？

Answer 1

您正在使用样式组件为输入组件设计样式。

您可以在这条线上看到您正在将样式应用于textfield component：

const StyledTextField = styled(TextField)

而在新的productfield component 您导入的组件，样式版本和原始版本和原始版本和nest他们彼此之间：

    <StyledTextField textAlign="center">
      <TextField name={name} value={value} />
    </StyledTextField>

这本质上意味着您将两个输入字段彼此嵌套，这是不允许的，因此错误：

错误：输入是一个无效元素标签，不得有孩子也不使用dangesslysetinnerhtml。

一种方法是简单地删除嵌套textfield这样的方法，然后将所有道具应用于样式的一个：

<StyledTextField textAlign="center" name={name} value={value} />

另一个解决方案是直接导出并使用样式版本，因为附加包装器似乎多余。

更多信息有关如何使用样式组件的定制组件样式