将React组件作为道具传递，用作在TreeView中渲染节点的模板

Question

I am building a flexible <TreeView /> component, where the user will be able to inject his own <TreeNode /> , as an HTML template.

What I currently do works, but I can't set the propTypes as mandatory with my design pattern, because the <TreeNode /> component only receive its props when I use it in <TreeView /> , in a map function.

Is there a better way to do this so I can use mandatory propTypes?

TreeNode.js :

const TreeNode = (props) => {
    return (
        <div>
            <p>{props.id}</p>
            <p>{props.nodeTitle}</p>
            <p>{props.nodeDescription}</p>
        </div>
    )
}

TreeView.js , very simplified:

export class TreeView extends React.Component {
    render() {
        const childrenList = props.treeViewData.map((treeNodeData) => {
            const treeNodeTemplateProps = {
                id: treeNodeData.id,
                nodeTitle: treeNodeData.nodeTitle,
                nodeDescription: treeNodeData.nodeDescription
            }              
            const treeNodeTemplate = this.props.treeNodeTemplate(treeNodeTemplateProps )
            return (
                {treeNodeTemplate}
            )
        })

        return <div>{childrenList}</div>
    }
}

index.js

import { TreeView } from './TreeView'
import { treeViewData } from './treeViewData'
import { TreeNode } from './TreeNode'

const element = <TreeView 
    treeViewData={treeViewData}
    treeNodeTemplate={TreeNode} />

ReactDOM.render(element , document.getElementById('root'))

Answer 1

While treenode is a functional component you can provide propTypes to it as you would do with another component:

 const TreeNode = (props) => { return ( <div> <p>{props.id}</p> <p>{props.nodeTitle}</p> <p>{props.nodeDescription}</p> </div> ) } TreeNode.propTypes = { title: PropTypes.string }; // Same approach for defaultProps too TreeNode.defaultProps = { title: "No Title", }; export default TreeNode;