List组件在renderItem的时候如果结合Yo元件样式，则有一定问题。

[chinavane]

renderItem的时候将会自动生成<li class="item"></li>的内容，那么在renderItem里如果用content进行包含，那么就无法适应Yo的基本样式处理了。比如：目标应该生成
<div class="item"><div class="mark">标题</div><div class="flex">具体描述</div></div>
那么在renderItem里应该设置什么样的结构呢？

[Ellery0924]

renderItem只能定制li 里面的内容，这种情况可以返回数组

[chinavane]

你指的返回数组是怎么样一种操作形式？那渲染对象的操作呢？

[Ellery0924]

return [div1, div2]; 一个jsx数组

[chinavane]

返回一个jsx数组的意义在哪呢？jsx中也还是<tag><div></div><span></span></tag>包含起来的，渲染出来的结果仍旧是<li class="item"><tag><div></div><span></span></tag></li>，dataSource本身返回的就是一个array。

[Ellery0924]

renderItem函数返回 [<div></div>,<div></div>]即可，li标签名字不能改变

[chinavane]

[<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 根据这里的列表模式实现

[Ellery0924]

可以的 试试看吧 这组件我写的

[chinavane]

`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，最终无法渲染成功。

[chinavane]

cmd窗口提示。

[Ellery0924]

http://ued.qunar.com/hy2/yo/component-List.html#renderItem

亲，这种情况下不要用text来渲染，配置个renderItem返回个jsx数组就可以了

[Ellery0924]

renderItem={(item)=>{
  return [<div key={0}></div>, <div key={1}></div>];
}}

[chinavane]

好的，看来想复杂了。谢谢耐心指导。

[Ellery0924]

客气哈 推荐任何情况下都用renderItem，因为List的dataSource里面应该传入的是纯数据，如果混杂有jsx就很难做到数据和展示分离了，text这个属性是当初的设计失误，现在感觉并没有什么卵用。