[英]Rendering component based on state/prop in React?
I've been learning React and I was wondering how would I be able to render classes/components based on the state? 我一直在学习React,我想知道如何根据状态呈现类/组件?
I was thinking perhaps putting something like: 我在想,也许像这样:
var currentState = this.state.title;
< currentState />
but that doesn't seem to work. 但这似乎不起作用。
I can do it using if statements or case/switch but that doesn't seem to be particularly flexible. 我可以使用if语句或case / switch来做到这一点,但这似乎并不特别灵活。
Here is what I'm working with currently: 这是我目前正在使用的工具:
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')
);
Essentially I'd like to render the appropriate class based on the current name of the state. 本质上,我想基于状态的当前名称来呈现适当的类。 For example if the state.title = Proj1, i'd like to render Proj1, alternatively if the state.title = Proj2, i'd like to render Proj2. 例如,如果state.title = Proj1,我想渲染Proj1,或者如果state.title = Proj2,我想渲染Proj2。
Please and thanks 请和谢谢
I want to add a comment on top of Tyler McGinnis but unfortunately I don't have enough reputation to do that :). 我想在泰勒·麦金尼斯(Tyler McGinnis)之上添加一条评论,但不幸的是,我没有足够的声誉来做到这一点:)。 I think the edited answer 'worked' but still we need a map between title and the class. 我认为编辑后的答案“行得通”,但仍然需要标题和课程之间的映射。 A way to do is to store these React Classes to an accessible object, like 一种方法是将这些React类存储到可访问的对象中,例如
Components = {};
Components.Proj1 = React.createClass({...}};
Components.Proj2 = React.createClass({...}};
...
ContentContainer = React.createClass({
return (
var Proj = Components[this.state.title];
<Proj/>
});
I think that's still a bit hack-ish, and I don't have a better answer. 我认为这仍然有些破绽,而且我没有更好的答案。
I think most of the time, React component states are used to control certain html/css properties, your use case is more like using object factory to create/get different type of objects, in which using if statement doesn't seem to bad. 我认为大多数时候,React组件状态用于控制某些html / css属性,您的用例更像是使用对象工厂来创建/获取不同类型的对象,其中使用if语句似乎还不错。
There are multiple ways you can do this. 您可以通过多种方式执行此操作。 All basically are just if statements though. 基本上所有的内容只是if语句。 I'd probably go with something like this and use a ternary operator, that's usually the most common practice. 我可能会选择类似的方法并使用三元运算符,这通常是最常见的做法。
var ContentContainer = React.createClass({
getInitialState: function(){
return {
title: 'Proj1'
}
},
render: function(){
return this.state.title === 'Proj1' ? <Proj1 /> : </Proj2>;
}
});
edit: I think you're wanting to know how to set components to variables. 编辑:我想你想知道如何将组件设置为变量。 In this example, 在这个例子中
var currentState = this.state.title;
< currentState />
if we assume this.state.title was a component (which it's not), then you would just need to capitalize currentState. 如果我们假设this.state.title是一个组件(不是),那么您只需要大写currentState。
For example. 例如。
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 />
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.