List组件在renderItem的时候如果结合Yo元件样式,则有一定问题。
Closed this issue · 13 comments
renderItem的时候将会自动生成<li class="item"></li>
的内容,那么在renderItem里如果用content进行包含,那么就无法适应Yo的基本样式处理了。比如:目标应该生成
<div class="item"><div class="mark">标题</div><div class="flex">具体描述</div></div>
那么在renderItem里应该设置什么样的结构呢?
renderItem只能定制li 里面的内容,这种情况可以返回数组
你指的返回数组是怎么样一种操作形式?那渲染对象的操作呢?
return [div1, div2]; 一个jsx数组
返回一个jsx数组的意义在哪呢?jsx中也还是<tag><div></div><span></span></tag>
包含起来的,渲染出来的结果仍旧是<li class="item"><tag><div></div><span></span></tag></li>
,dataSource本身返回的就是一个array。
renderItem函数返回 [<div></div>,<div></div>]
即可,li标签名字不能改变
[<div class="mark">标题</div><div class="flex">具体描述</div>,<div class="mark">标题</div><div class="flex">具体描述</div>....]
这样子结构能返回?应该是不能的。需要的是几个并列标签模式。
http://ued.qunar.com/hy2/yo/demo/src/html/fragment/yo-list.html 根据这里的列表模式实现
可以的 试试看吧 这组件我写的
`componentWillMount(){
var that = this;
$.ajax({
type: 'GET',
url: 'http://api.dagoogle.cn/news/get-news',
data:{
tableNum:1,
pagesize:40
},
async:false,
dataType:'jsonp',
success: function(res){
var lst = [];
var Things= res.data;
for (var i = 0; i < Things.length; i++) {
var obj = {};
obj.text = <div class="mark">{Things[i].news_id}</div></div class="flex">{Things[i].title}</div>
lst.push(obj);
};
that.setState({
dataSource: lst
})
}
});
}
render() {
return (
<div className="yo-flex">
<Header title={this.state.s_title} right={{ title: '点我', onTap: () => alert('hello') }}/>
<List
ref="list"
extraClass="flex m-list"
dataSource={this.state.dataSource}
/>
</div>
)
}`
根据生成的示例文件,修改page/demo/list/index.js,加入componentWillMount钩子函数,在请求完以后进行jsx对象的数组生成,通过文档中的默认text渲染模式操作了。但是因为是jsx,所以<div class="mark">{Things[i].news_id}</div></div class="flex">{Things[i].title}</div>
的模式并没有进行close关闭操作。所以无法实现并列标签的操作。
我也查看了ListItem.js源代码,确认:
_react2.default.createElement( 'li', Object.assign({}, basicProps, additionalProps), renderItem(item.srcData, item._index) )
进行对象生成,所以定死了li。
通过这种情况,最终就会变成
<div class="item"><div class="item"><div class="mark">标题</div><div class="flex">具体描述</div></div></div>
的结构形式。而yo的样式结构顺序因为多了一层item,最终无法渲染成功。
http://ued.qunar.com/hy2/yo/component-List.html#renderItem
亲,这种情况下不要用text来渲染,配置个renderItem返回个jsx数组就可以了
renderItem={(item)=>{
return [<div key={0}></div>, <div key={1}></div>];
}}
好的,看来想复杂了。谢谢耐心指导。
客气哈 推荐任何情况下都用renderItem,因为List的dataSource里面应该传入的是纯数据,如果混杂有jsx就很难做到数据和展示分离了,text这个属性是当初的设计失误,现在感觉并没有什么卵用。