时间戳

首页 > 解决方案 > 将 React 组件作为 props 传递，用作模板以在 TreeView 中呈现节点

javascript - 将 React 组件作为 props 传递，用作模板以在 TreeView 中呈现节点

问题描述

我正在构建一个灵活的<TreeView />组件，用户可以在其中注入自己<TreeNode />的 HTML 模板。

我目前所做的工作，但我无法将 propTypes 设置为我的设计模式的强制性，因为组件仅在我在函数中<TreeNode />使用它时才会收到它的 props 。<TreeView />map

有没有更好的方法来做到这一点，以便我可以使用强制 propTypes？

树节点.js：

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

TreeView.js，非常简化：

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'))

标签： javascriptreactjs

解决方案

虽然 treenode 是一个功能组件，但您可以像使用另一个组件一样为其提供 propTypes：

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;

推荐阅读