Загрузка React Sidebar в родительском компоненте при загрузке дочернего компонента

Question

В React я пытаюсь загрузить компонент боковой панели в родительский компонент при загрузке определенного дочернего компонента. Первая проблема, с которой я столкнулся, это то, что я продолжаю получать ошибку TypeError, которая this не определена. Во-вторых, невозможно загрузить <Sidebar/> при загрузке <NewPage/>. Я также хотел бы обновить заголовок в main, но пока не могу добраться до этой точки, пока не смогу показать боковую панель.

Ниже приведен JSFiddle из трех классов, которые я собрал, чтобы продемонстрировать проблему.

https://jsfiddle.net/pegues/9d31pah7/

Ниже приведен код компонента основного класса:

class Main extends React.Component{

    constructor(props){
        super(props);

        this.titleHandler = this.titleHandler.bind(this);
        this.sidebarHandler = this.sidebarHandler.bind(this);

        this.state = {
            pageTitle: '',
            mounted: false,
            data: [],
            sidebar: false
        }
    }

    // Title Handler
    titleHandler(){
        console.log('Page Title Function Called');
        this.setState({ pageTitle: this.state.pageTitle });
    }

    // Sidebar Handler
    sidebarHandler(){
        console.log('Sidebar Function Called');
        this.setState({ sidebar: !state.sidebar });
    }

    // Load Dashboard
    loadDashboard(){
        ReactDOM.render(<Dashboard/>, document.querySelector('#main-content'));
    }

    // Load New Page
    loadNewPage(){
        ReactDOM.render(<NewPage action={this.sidebarHandler} />, document.querySelector('#main-content'));
    }

    // Render
    render(){
        return(
            <div id="wrapper" className="wrapper">

                <button onClick={this.loadDashboard}>Load Dashboard</button>
                <button onClick={this.loadNewPage}>Load New Page</button>

                {/* Content: Start */}
                <div id="content" className="content">

                    {/* Main: Start */}
                    <div id="main" className="main">

                        <div className="section-title">
                            <h2>{this.state.pageTitle}</h2>
                        </div>

                        {/* Main Content Container: Start */}
                        <div id="main-content" className="main-content container-fluid"></div>
                        {/* Main Content Container: End */}

                    </div>
                    {/* Main: End */}

                    {this.state.sidebar ? <Sidebar/> : null}

                </div>
                {/* Content: End */}

            </div>
        );
    };
}

ReactDOM.render(<Main />,document.querySelector('#root'));

Ниже приведен компонент класса NewPage:

class NewPage extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            pageTitle: 'New Page',
            sidebar: false
        };

        this.props.action.bind(this);
    }

    // Component Will Mount
    componentWillMount(){}

    // Component Did Mount
    componentDidMount(){}

    // Component Will Unmount
    componentWillUnmount(){}

    // Render
    render(){
        return(
            <div>
                New Page Content...
            </div>
        );
    }
}

Answer 1

Используйте функции стрелок в свойствах класса, чтобы избежать привязки this.handleCardClick = this.handleCardClick.bind(this).

В вашем случае вы забыли привязку loadNewPage и т. Д.

class Main extends Component {
  state = {
    pageTitle: "",
    mounted: false,
    data: [],
    sidebar: false
  };

  titleHandler = () => { ... }

  sidebarHandler = () => { ... }

  loadDashboard = () => { ... }

  loadNewPage = ()  => { ... }
...
}

Более того, вы не ссылаетесь наstate in sidebarHandler:

sidebarHandler = () => {
    console.log('Sidebar Function Called');
    this.setState({ sidebar: !this.state.sidebar }); // Not state.sidebar
}

В вашем коде гораздо больше ошибок, например, не используется props.action, который передан в NewPage и т. Д.

Использовать текущийпесочница с переключенными Dashboard, NewPage и Sidebar для просмотра вашего кода.