React TS-将道具传递到组件树

Question

我已经创建了表单元素，可以用不同的方式对其进行配置以创建表单。

这是一个例子：

<form>
  <Label htmlFor="name" name="Enter name:" />
  <InputWrapper>
    <Input id="name" name="name" />
  </InputWrapper>
  <CharacterLimit />
</form>

我想做的是在maxLength组件上设置required和prop Input，这将使我的Label组件具有红色的星号（*）和我的CharacterLimit组件，以显示在maxLength组件上设置的Input。

这是我的Label组件的样子：

interface ILabel {
  htmlFor: string;
  name: string;
  required?: boolean;
}

export const Label: React.FC<ILabel> = ({ htmlFor, name, required }) => {
  return (
    <StyledLabel htmlFor={htmlFor}>
      {name} {required && <StyledRequired>*</StyledRequired>}
    </StyledLabel>
  );
};

const StyledLabel = styled.label`
  font-weight: 600;
`;
const StyledRequired = styled.span`
  color: red;
`;

这是我的CharacterLimit组件的样子：

interface ICharacterLimit {
  maxLength?: number;
}

export const CharacterLimit: React.FC<ICharacterLimit> = ({ maxLength }) => {
  return (
    <>
      {maxLength && (
        <StyledCharacterLimit>0 / {maxLength} Characters</StyledCharacterLimit>
      )}
    </>
  );
};

现在您可能想知道为什么我不只是把Label和 CharacterLimit组件内部的Input个组件，以及 有条件地以这种方式渲染它们。

好吧，您可以看到另一个名为InputWrapper的组件，它用于设置input的“容器”的样式，因此我想将这种样式分开例如，我可以在容器中放入input和button。

这里有一个例子可以更好地说明我的意思：

如何将道具从我的Input组件传递到Label和CharacterLimit组件？还是有另一种方法可以在我的插图中实现相同的布局？

我在CodeSandBox上做了一个演示

Answer 1

这不一定是答案，但是评论太久了

类似这样的东西：

const FormModel = () => {
  const [formModel, setFormModel] = useState();
  const updateFormModel = name => value => setFormModel({
    ...formModel,
    { [name]: value }
  });
  return (
    <form>
      <InputWrapper onChange={updateForm("something")} isValid={validate(formModel)} />
    <form>
  );
};

const InputWrapper = ({ onChange, isValid }) => {
  // returns appropriate stuff, including 
  // <input onChange={e => onChange(e.currentTarget.value)} />
  // styled based on isValid prop. May also want to debounce
  // input, but whateves.
}