Блог

(Для простоты я бросил несколько любых здесь и там)

Со стороны потребителя я получил —

 const Foo: React.FunctionComponentlt;{  items: Arraylt;{ id: string; title: string; caption: string }gt;; }gt; = ({ items }) =gt; {  const [value, setValue] = React.useStatelt;number | nullgt;(null);  const handleChange = (_: React.SyntheticEvent, newValue: number | null) =gt; {  setValue(newValue);  };   return (  lt;Wrapper value={value} handleChange={handleChange}gt;  {items.map(({ id, title, caption }) =gt; {  return lt;Inner key={id} title={title} caption={caption} /gt;;  })}  lt;/Wrappergt;  ); };  

Что делает Обертка, так это берет детей и передает им несколько дополнительных реквизитов, вот так —

 const Wrapper: React.FunctionComponentlt;{  value: number | null;  handleChange: any; }gt; = ({ value, handleChange, children }) =gt; {  return React.Children.map(children, (child, index) =gt; {  if (!child || !React.isValidElement(child)) {  return null;  }  return React.cloneElement(child, {  onChange: handleChange(index),  value,  selected: value === index,  ...child.props,  });  }); };  

И, в конце концов, Внутреннее-это —

 const Inner: React.FunctionComponentlt;{  title: string;  caption: string;  onChange: any;  value: number | null;  selected: boolean; }gt; = ({ title, caption, onChange, value, selected }) =gt; {  return (  lt;ThirdPartyComponent onChange={onChange} value={value} selected={selected}gt;  lt;h1gt;{title}lt;/h1gt;  lt;h5gt;{caption}lt;/h5gt;  lt;/ThirdPartyComponentgt;  ); };  

Проблема в том, что интерфейс Inner требует вещей, которые не передаются в Foo, но передаются в оболочке. Я пытаюсь найти способ напечатать его таким образом, чтобы не показывать эти реквизиты потребителю. Установка этих реквизитов как необязательных-это решение, которое мне не нравится, потому что оно предоставляет их потребителю. До сих пор я не мог найти решение.

Передача реквизитов не является явной, отсюда и проблема. Если Wrapper используется только для этой логики, я бы переписал ее в крюк и вернул недостающие реквизиты:

 const wrapperProps = useWrapper(value, handleChange) return (  lt;gt;  {items.map(({ id, title, caption }, index) =gt; {  return lt;Inner key={id} title={title} caption={caption} {...wrapperProps(index)} /gt;;  })}  lt;/gt; );