如何为内部嵌套组件提供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,
};

林特尔正确地指出，Form(props)中的props.selected需要propTypes。但我不知道在哪里以及如何提供它们"selected"在道具验证中丢失。

我尝试了显而易见的：

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

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

如何将嵌套组件的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问题"；。