Компонент рендеринга, основанный на состоянии / пропоте в React?

Question

Я изучал React, и мне было интересно, как я смогу отображать классы / компоненты в зависимости от состояния?

Я думал, возможно, положить что-то вроде:

var currentState = this.state.title;
< currentState />

но это не похоже на работу.

Я могу сделать это, используя операторы if или case/switch, но это не кажется особенно гибким.

Вот с чем я сейчас работаю:

var Proj1 = React.createClass({
    render: function(){
        return (
            <h1>Number one</h1>
        )   
    }
});

var Proj2 = React.createClass({
    render: function(){
        return (
            <h1>Number two</h1>
        )   
    }
});

var ContentContainer = React.createClass({
    getInitialState: function(){
        return {
            title: 'Proj1'
        }
    },
    render: function(){
        return (
            ///// Proj1?
        )
    }
});

React.render(
    <ContentContainer/>, document.getElementById('container')
 );

По сути, я хотел бы сделать соответствующий класс на основе текущего имени государства. Например, если state.title = Proj1, я хотел бы отобразить Proj1, или, если state.title = Proj2, я хотел бы отобразить Proj2.

Пожалуйста и спасибо

Answer 1

Я хочу добавить комментарий к Тайлеру МакГиннису, но, к сожалению, у меня недостаточно репутации, чтобы сделать это:). Я думаю, что отредактированный ответ "сработал", но все же нам нужна карта между названием и классом. Один из способов - сохранить эти классы React в доступном объекте, например

Components = {};
Components.Proj1 = React.createClass({...}};
Components.Proj2 = React.createClass({...}};
...
ContentContainer = React.createClass({
    return (
        var Proj = Components[this.state.title];
        <Proj/>
});

Я думаю, что это все еще немного хак, и у меня нет лучшего ответа.

Я думаю, что в большинстве случаев состояния компонентов React используются для управления определенными свойствами html / css, ваш вариант использования больше похож на использование фабрики объектов для создания / получения объектов различного типа, в которых использование оператора if не кажется плохим.

Answer 2

Есть несколько способов сделать это. Все в основном просто заявления, хотя. Я бы, наверное, пошел с чем-то вроде этого и использовал бы троичный оператор, это обычно самая распространенная практика.

var ContentContainer = React.createClass({
    getInitialState: function(){
        return {
            title: 'Proj1'
        }
    },
    render: function(){
        return this.state.title === 'Proj1' ? <Proj1 /> : </Proj2>;
    }
});

редактировать: я думаю, что вы хотите знать, как установить компоненты для переменных. В этом примере

var currentState = this.state.title;
< currentState />

если мы предположим, что this.state.title был компонентом (а это не так), то вам просто нужно использовать прописную букву currentState.

Например.

getInitialState(){
  return {
    proj1: Proj1 //Proj1 is a React Component.
  }
}
render(){
  var Proj1 = this.state.proj1; //you just need to capitalize the variable name.
  return <Proj1 />
}