react.js - 在React Native的render方法中，如何动态的输出Component?

问题描述

问 题

这是我的一系列疑问，比如:在render()方法中如何通过js的循环体动态地输出渲染N个<View>? 比如我想输出:

<View>123</View>
<View>123<View>
<View>123<View>

换句话说:能否通过拼接字面量，进行模版渲染？不知道我说明白没

注:由于特殊场景不能使用ListView

解决方案

不确定你说的拼接字面量是什么意思，我的理解是一个todo list的例子。
假设你的component是一个todo list, props.list = ['待办事项1', '待办事项2', '待办事项3'];
用js 的 map 方法就可以动态输出每个item。如下：

class TodoList extends React.Component{
  constructor(props){
    super(props);
  }
  renderList(list){
    return list.map( item => this.renderItem(item) );
  }

  renderItem(item) {
    return (
           <View>{item}</View>
       );
  }
  render(){
    const { list } = this.props;
    return <View>
      {this.renderList(list)}
    </View>
  }
}

并没有测试这段代码，欢迎讨论。

这篇关于react.js - 在React Native的render方法中，如何动态的输出Component?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！