如何将React组件拆分为嵌套组件

Question

I would like to split up a react component, as I want to make an own component for the meta -block. So this is my current component:

/imports/ui/components/example.jsx

import React, { Component } from 'react';

export default class Example extends Component {
    constructor(props) {
        super(props);
        this.state = { activeMetaTab: 'First' };
        this.setActiveClassOnMetaMenu = this.setActiveClassOnMetaMenu.bind(this);
        this.handleChangeTabs = this.handleChangeTabs.bind(this);
    }

    setActiveClassOnMetaMenu(tab) {
        return this.state.activeMetaTab === tab ? 'active' : '';
    }

    handleChangeTabs(event) {
        this.setState({ activeMetaTab: event.target.textContent });
    }

    render() {
        return (
            <div className="ui raised padded text container segment">
                <h1 className="ui right floated header">Otitis media</h1>
                <div className="ui clearing divider"></div>

                <div id="meta" className="ui segment">
                    <div className="ui compact mini menu secondary vertical pointing">
                        { this.props.meta.map((item) => {
                            return (<a className={`item ${ this.setActiveClassOnMetaMenu(item.title) }`} onClick={ this.handleChangeTabs } key={ item.title}>{ item.title }</a>);
                        }) }
                    </div>
                    { this.props.meta.map((item, index) => {
                        return (
                            <div className={`ui tab content ${ this.setActiveClassOnMetaMenu(item.title) }`} key={ index }>
                                <p>{ item.content }</p>
                            </div>
                        );
                    }) }
                </div>

            </div>
        );
    }
}

/client/main.js

import Example from '../imports/ui/components/example.jsx';

render(<Example
    meta = {[
        { title: 'First', 'content': 'Lorem ipsum 1' },
        { title: 'Second', 'content': 'Lorem ipsum 2' },
        { title: 'Third', 'content': 'Lorem ipsum 3' },
    ]}
/>, document.getElementById('react-root'));

---

I would like to use a meta component, but I don't know how to nest a component into another (main) component. So this is what I come up with:

/imports/ui/components/example.jsx

import React, { Component } from 'react';

import ExampleMeta from './example-meta.jsx';

export default class Example extends Component {
    render() {
        return (
            <div className="ui raised padded text container segment">
                <h1 className="ui right floated header">Otitis media</h1>
                <div className="ui clearing divider"></div>

                <ExampleMeta />
            </div>
        );
    }
}

/imports/ui/components/example-meta.jsx

import React, { Component } from 'react';

export default class ExampleMeta extends Component {
    constructor(props) {
        super(props);
        this.state = { activeMetaTab: 'First' };
        this.setActiveClassOnMetaMenu = this.setActiveClassOnMetaMenu.bind(this);
        this.handleChangeTabs = this.handleChangeTabs.bind(this);
    }

    setActiveClassOnMetaMenu(tab) {
        return this.state.activeMetaTab === tab ? 'active' : '';
    }

    setActiveClassOnContentMenu(item) {
        return this.state.activeContentTab === item ? 'active' : '';
    }

    handleChangeTabs(event) {
        this.setState({ activeMetaTab: event.target.textContent });
    }

    render() {
        return (
            <div id="meta" className="ui segment">
                <div className="ui compact mini menu secondary vertical pointing">
                    { this.props.meta.map((item) => {
                        return (<a className={`item ${ this.setActiveClassOnMetaMenu(item.title) }`} onClick={ this.handleChangeTabs } key={ item.title}>{ item.title }</a>);
                    }) }
                </div>
                { this.props.meta.map((item, index) => {
                    return (
                        <div className={`ui tab content ${ this.setActiveClassOnMetaMenu(item.title) }`} key={ index }>
                            <p>{ item.content }</p>
                        </div>
                    );
                }) }
            </div>
        );
    }
}

Answer 1

What you did is almost right. However , you have to forward meta props to <ExampleMeta /> :

/imports/ui/components/example.jsx

import React, { Component } from 'react';

import ExampleMeta from './example-meta.jsx';

export default class Example extends Component {

    render() {
        return (
            <div className="ui raised padded text container segment">
                <h1 className="ui right floated header">Otitis media</h1>
                <div className="ui clearing divider"></div>

                <ExampleMeta meta={this.props.meta} />
            </div>
        );
    }
}