如何为内部嵌套组件提供 PropTypes？

Question

我有一个相当复杂的组件，所以我从嵌套组件构建它。简体：

export function BlockProvideFeedback(props) {  
  const handleSelect = (event) => console.log(event);

  const Form = (props) => (
    <>
      <RadioList selected={props.selected} />
      <Button onClick={handleSelect} />
    </>
  );

  const Message = () => (
    <p>Thanks for the feedback</p>
  );

  if (props.feedbackStatus == 'agreed') {
    return(<Form selected='done'/>);
  if (props.feedbackStatus == 'pending') {
    return(<Form selected='needswork'/>);
  } else {
    return(<Message/>);
  }
};

BlockProvideFeedback.propTypes = {
  feedbackStatus: PropTypes.string.isRequired,
};

linter 是正确的 IMO，指出 Form(props) 中的 props.selected 需要 propTypes。但我不知道在哪里以及如何提供它们。道具验证中缺少 'selected'。

我尝试了显而易见的方法：

BlockProvideFeedback().Form.propTypes { //... }

但这会引发错误，因为我在没有适当的上下文、道具、提供者等的情况下实例化组件（通过调用函数）

如何在 props 验证中为我的嵌套组件放置 selected？

或者我可能做了其他一些非常错误的事情：例如，我的整个嵌套 maybe 的设置是如此不反应，以至于工具（如 linters）会在无法解决它的情况下失败？

Answer 1

如果Form和Message不打算共享和重用，我会在“渲染函数”中转换它们；类似于：

export function BlockProvideFeedback(props) {  
  const handleSelect = (event) => console.log(event);

  const renderForm = (selectedVal) => (
    <>
      <RadioList selected={selectedVal} />
      <Button onClick={handleSelect} />
    </>
  );

  const renderMessage = () => (
    <p>Thanks for the feedback</p>
  );

  if (props.feedbackStatus == 'agreed') {
    return renderForm('done');
  if (props.feedbackStatus == 'pending') {
    return renderForm('needswork');
  } else {
    return renderMessage();
  }
};

BlockProvideFeedback.propTypes = {
  feedbackStatus: PropTypes.string.isRequired,
};

我知道，这并不是你问题的真正答案，但在我看来，这种情况可能是一种“XY 问题”。

如何为内部嵌套组件提供 PropTypes？

How can I provide the PropTypes for a inner, nested component?

javascript

reactjs

react-proptypes