reactjs - 在 React JS 中使用组合

问题描述

我是 React JS 的新手，我试图找出扩展其他组件的最佳实践

我有一个父组件。它显示带有 1 个项目的默认菜单，我希望可以扩展这些项目。

父组件看起来像这样：

class ParentComponent extends React.Component {

    constructor(props) {

        const items = [
            {text:'Add'}
        ]

        this.state = {
            items: items
        }
    }

    render() {
        return(<Menu items={this.state.items} />)
    }

}

现在我想让项目可扩展我应该怎么做？我可以在构造函数中使用道具

class ParentComponent extends React.Component {

    constructor(props) {

        const items = [
            {text:'Add'}
        ]

        if (this.props.extraItems) {
            items.push(...this.props.extraItems);
        }

        this.state = {
            items: items
        }
    }

    render() {
        return(<Menu items={this.state.items} />)
    }

}

它可以工作，但是如果外部项目不能在构造函数中添加，而是动态添加呢？我可以将它完全移动到 render() ：

class ParentComponent extends React.Component {

    constructor(props) {
    }

    render() {

        const items = [
            {text:'Add'}
        ]

        if (this.props.extraItems) {
            items.push(...this.props.extraItems);
        }

        return(<Menu items={items} />)
    }

}

但现在：

我不能再使用状态了
所有项目（以及未来的其他工作人员）都将在每次渲染中进行初始化，我认为这对性能不利

我应该使用从外部调用的方法还是有其他方法？

class ParentComponent extends React.Component {

    constructor(props) {

        const items = [
            {text:'Add'}
        ]

        this.state = {
            items: items
        }
    }

    render() {
        return(<Menu items={this.state.items} />)
    }

    addExtraItems(extraItems) {
        this.setState(prevState => ({
            items: [...prevState.items, ...extraItems]
        }))
    }

}

标签： reactjs

reactjs - 在 React JS 中使用组合

问题描述

解决方案

推荐阅读