描述：我定义了一个组件，这个组建主要是根据不同的条件，往dom中插入不同的dom，比如type==1，就插入a和b两个jsx.element，请问该怎么写代码呢？
主要是我是初学者，对语法不懂，网上搜了很久也米有找到答案或者可借鉴的例子，所以求助万能的大神们.先谢谢啦
用ts写react，遇到多个条件判断的时候不知道怎么写？求助
xiehaiyan
#1
xiaotuni
#3
render() {
const { type } = this.props
return (
<div className={styles.className}>
{
type === 1 && <div>
<ComponentA/>
<ComponentB/>
</div>
}
</div>
);
}
xiehaiyan
#5
class QuestionTemplate extends React.Component<{ dataSource: Question }, {
wenjuan?:QTModle;
}> {
getInputType(): string {
return this.props.dataSource.type == 1 ? “radio” : “checkbox”;
}
getInputName() {
return this.getInputType() + this.props.dataSource.listNum;
}
del_ti(index){
const lists = wenjuan.qList;
}
insterTi(){
let type = this.props.dataSource.type;
}
render() {
const ti = this.props.dataSource;
const ti_title = (
<li className="clearfix">
<span className="mail_paper_span">{ti.listNum}</span>
{/*<div className="mail_paper_con" data-contenteditable="true" defaultValue={ti.title} onChange={e => (ti.title = e.target.value)}></div>*/}
<div data-contenteditable="true" className="mail_paper_con">{ti.title}</div>
</li>
);
const ti_items = ti.items.map((item, index) => {
return (
<li className="clearfix">
<span className="mail_paper_span">
<input
type={this.getInputType()}
name={this.getInputName()}
/>
</span>
<input
type="text"
defaultValue={item.title}
onChange={e => (item.title = e.target.value)}
className="iText c-444"
/>
<i
className="icon_v i-paper-delete"
onClick={e => {
ti.items.splice(index, 1);
this.setState({});
}}
/>
</li>
);
});
{/**单行输入**/}
const isdisplay = ti.type == 4 ?{disabled:'disabled'}:"";
const texarea_item = (
<li className="clearfix">
<span className="mail_paper_span questionList">{ti.listNum}</span>
<textarea className="mail_paper_con"></textarea>
</li>
);
const grayTexarea_item = (
<li className="clearfix">
<span className="mail_paper_span questionList">{ti.listNum}</span>
<textarea className="mail_paper_con" data-disabled="disabled"></textarea>
</li>
);
const oneLineTextInput =(
<li className="clearfix">
<span className="mail_paper_span"></span>
<input data-disabled="disabled" type="text" value="" className="iText c-444 mail_answer" style={{margin:0,background:'#dbdbdb'}} />
</li>
);
{/**量表图**/}
const statisticalList =(
<li className="clearfix">
<span className="mail_paper_span"></span>
<div className="mail_paper_select">
<span>非常不满意</span>
<span>1<input type="radio" data-disabled="disabled" /></span>
<span>2<input type="radio" data-disabled="disabled" /></span>
<span>3<input type="radio" data-disabled="disabled" /></span>
<span>4<input type="radio" data-disabled="disabled" /></span>
<span>5<input type="radio" data-disabled="disabled" /></span>
<span>非常满意</span>
</div>
</li>
);
const add_item_btn = (
<li className="clearfix">
<span className="mail_paper_span" />
<a href="javascript:;"
className="mail_paper_add"
onClick={e => {
ti.items.push({
title: ""
});
this.setState({});
}}
>
添加选项
</a>
</li>
);
const del_item_btn =(
<li className="clearfix">
<a href="" className="mail_paper_delete" onClick={e =>{
const index = ti.listNum;
this.del_ti(index);
this.setState({});
}}>删除</a>
</li>
);
{/** 其他几种图标的dom
{texarea_item}
{oneLineTextInput}
{statisticalList}
**/}
const ti_body = (
<div className="mail_paper_list">
<ul>
</ul>
</div>
)
let type = this.props.dataSource.type;
return (
<div className="mail_paper_list">
<ul>
/就是这里在插入dom的时候，ts语法报错，不知道怎么写/
{if(type ==1 || type == 2)
{ti_title}
{ti_items}
{add_item_btn}
{del_item_btn}
}
{ if (type == 3)
{texarea_item}
{oneLineTextInput}
}
{ if (type == 4){
{texarea_item}
{grayTexarea_item}
}}
{if (type == 4){
{texarea_item}
{statisticalList}
}}
</ul>
</div>
);
}
}
