Comments (13)
renderItem只能定制li 里面的内容,这种情况可以返回数组
from yo.
你指的返回数组是怎么样一种操作形式?那渲染对象的操作呢?
from yo.
return [div1, div2]; 一个jsx数组
from yo.
返回一个jsx数组的意义在哪呢?jsx中也还是<tag><div></div><span></span></tag>
包含起来的,渲染出来的结果仍旧是<li class="item"><tag><div></div><span></span></tag></li>
,dataSource本身返回的就是一个array。
from yo.
renderItem函数返回 [<div></div>,<div></div>]
即可,li标签名字不能改变
from yo.
[<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 根据这里的列表模式实现
from yo.
可以的 试试看吧 这组件我写的
from yo.
`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,最终无法渲染成功。
from yo.
from yo.
http://ued.qunar.com/hy2/yo/component-List.html#renderItem
亲,这种情况下不要用text来渲染,配置个renderItem返回个jsx数组就可以了
from yo.
renderItem={(item)=>{
return [<div key={0}></div>, <div key={1}></div>];
}}
from yo.
好的,看来想复杂了。谢谢耐心指导。
from yo.
客气哈 推荐任何情况下都用renderItem,因为List的dataSource里面应该传入的是纯数据,如果混杂有jsx就很难做到数据和展示分离了,text这个属性是当初的设计失误,现在感觉并没有什么卵用。
from yo.
Related Issues (20)
- @mixin border方法在某些低版本安卓机上一列上多个元素有边框的情况下边框显示不全 HOT 3
- Yo的合作伙伴 HOT 1
- 综合实例 HOT 2
- $tip HOT 7
- 关于使用yo后的css代码规范 HOT 1
- 基于webpack+vue使用yo 不知道为什么样式不能生产 代码如下 HOT 2
- 为什么没有找到iconfont的文件呀? HOT 3
- 未找到的依赖项 HOT 4
- 1px border 显示不完整 HOT 2
- yo-search元件`input-height`参数失效 HOT 1
- 移除 align() mixin 的 type 参数 HOT 1
- Yo有@types文件吗? HOT 3
- 请问在将yo里面js文件打包的时候报错怎么解决? HOT 2
- vue单文件组件里写@include报错啊 HOT 1
- 示例在手机浏览器加载不了列表和详情页 HOT 3
- ellipse
- 强烈建议Confirm、Alert组件能更灵活些
- yo太过依赖ykit
- 如何加入国际化支持?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from yo.