Как присвоить react-компонент ссылке?

Question

[copal]

Вот так не работает -

store_changeHandler = (event)=>{
    var Component = this.props.store.view;
    this.setState({
        component: <Component />
    });
};

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

А вот так работает -

store_changeHandler = (event)=>{
    this.setState({
        component: this.props.store.view
    });
};

render() {
    var Component = this.state.component;
    return <div>{<Component />}</div>;
}

Вопрос - как сделать рабочим первый вариант? И почему не работает в первом случаи?

Comments

[Андрей Антропов]

Уточните с какой ошибкой падает первый вариант

[copal]

Андрей Антропов: ошибок нет..

[copal]

Андрей Антропов: просто в первом варианте this.state.component !== , он ровняется ссылке на модуль содержащий класс-компонент.

[Андрей Антропов]

copal: Это весьма странно, надо больше кода окружающего

[copal]

Андрей Антропов: а у Вас так работает?

[Андрей Антропов]

copal: Этого кода как раз недостаточно, чтобы проверить как это работает, спрашиваю для проверки как раз

[copal]

Андрей Антропов: Вот минимальный пример, который я написал чтобы показать общую картину. Но этот код я не проверял, по этому если где-то закралась маленькая ошибка, то просто имейте ввиду, что она не является причиной неработоспособности.

export default class Store {
    constructor(views){
        this.view = views['mainPage'];
    }
}

import React from 'react';
import {Component} from 'react';

export default class MainView extends Component{
    constructor(props){
        super(props);
    }
    static defaultProps = {
        store: null
    };

    static propTypes = {
        store: React.PropTypes.any.isRequired,
        component: React.PropTypes.element
    };

    state = {
        component: this.props.store.view
    };

    store_changeHandler = (event)=>{
        var Component = this.props.store.view;

        this.setState({
            component: <Component />
        });
    };

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

import MainView from './MainView';
import React from 'react';
import ReactDOM from 'react-dom';

import MainPage from './MainPage';

export default class Main {
    constructor(){
        this.store = new RouteStore({mainPage: MainPage});

        ReactDOM.render(
            <MainView store={this.store} />,
            document.querySelector('.main-container')
        );
    }
}

Answer 1

[Александр Прозоров]

Вот так будет работать:

store_changeHandler (event) {
    var Component = this.props.store.view;
    this.setState({
        component: (<Component />) 
    });
};

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

Полный пример тут