Question

我想从子组件列表中渲染组件：

我有一个容器，它在屏幕左侧呈现菜单，在右侧呈现部分。菜单项代表各个部分，当用户点击菜单中的某个项目时，所选部分将显示在屏幕的右侧。

在尝试使用React时，我最终得到了这个代码（从实际案例中大大简化了，为了缩短它，但应该足以将意图发送给读者）：

class SectionContainer extends React.Component {
    constructor(props) {
        super(props)

        this.sections = [
            <SettingsSection
                user={ this.props.user }
            />
        ];

        this.state = {
            selectedSection: 0
        }
    }

    selectSection(index) {
        this.setState({ selectedSection: index });
    }

    render() {
        return (
            <div>
                { this.renderMenu() }
                { this.renderSection() }
            </div>
        );
    }

    renderMenu() {
        let items = [];

        for (var i = 0; i < this.sections.length; i++) {
            items.push(this.sections[i].getMenuEntry());
        }

        return (
            <SectionMenu
                items={ items }
                selectSection={ this.selectSection.bind(this) }
                selectedSection={ this.state.selectedSection }
            />
        );
    }

    renderSection() {
        return this.sections[this.state.selectedSection];
    }
}

class SectionMenu extends React.Component {
    render() {
        return (
            <div>
                { _.map(this.props.items, (item, index) => this.renderSectionItem(item, index)) }
            </div>
        );
    }

    renderSectionItem(item, index) {
        return (
            <SectionItem 
                { ...item }
                onClick={ this.selectSection(index) }
                selectedSection={ this.props.selectedSection == index }
            />
        );
    }

    selectSection(index) {
        this.props.selectSection(index);
    }
}

class SectionItem extends ReactComponent {
    render() {
        return <div>...</div>
    }
}

class Section extends React.Component {
    getMenuEntry() {
        return {
            title: this.getTitle(),
            body: this.getBody(),
        }
    }
}

class SettingsSection extends Section {
    getTitle() {
        return 'Title';
    }

    getBody() {
        return [
            'Line 1',
            'Line 2',
            'Line 3',
        ]
    }

    render() {
        return (
            <div>...</div>
        );
    }
}

但是，看起来我无法在列表中获取React组件的实例，只是调用方法，或者在渲染方法上返回它们等等。看起来它们不是类的常规实例。

如何在React中完成此行为？（我来自Python背景，所以在使用React时我也可能有错误的心态，这可能会妨碍它。）

Answer 1

您可以通过refs API找到React元素的方法。

另请阅读此答案：React.js - access to component methods

但我认为你最好采用不同的方式：创建一个容器组件，它将呈现子组件：menu和section。它应包含所选项的状态并呈现相应的部分。您可以将容器方法传递给菜单子项，以便它可以更改它的父状态（选定项目）。

所有静态数据（标题，正文，描述等）都应存储在某个模型（对象或对象数组）中。 Container会将此模型中的数据传递给其子项。

如何从React组件列表中呈现React组件

1 个答案: