显示react-native组件数组

Question

我有一个反应本机组件的数组,并希望在视图中一次显示它们,但我不断收到错误

RawText [object object]必须包装在显式Component中

并在文本中显示它将无法获得所需的结果,我该如何去做.

render()
{
var CompArray = new Array();
CompArray[0] = <TextInput placeholder="First Name"/>
CompArray[1] = <TextInput placeholder="Last Name"/>

var Components = CompArray.join();

return(<View>{Components}</View>);
}

Answer 1

创建组件数组的一个好方法是创建数据数组并使用映射将它们转换为组件.这也避免了重复代码.

要做到这一点很简单:

const form = ['First Name', 'Last Name', 'Phone', 'Email', 'Etc']
const textInputComponents = form.map((type)=> <TextInput placeholder={type} />)

它们在渲染时调用刚刚创建的组件数组

render(){
    {textInputComponents}
}

如果您的表单/数组很大,这尤其有用,您甚至可以将它与对象数组一起使用.

Answer 2

您的代码很好，但是您正在做一件额外的事情，即加入数组。你不必这样做。

render()
{
 var CompArray = new Array();
 CompArray[0] = <TextInput placeholder="First Name"/>
 CompArray[1] = <TextInput placeholder="Last Name"/>
 return(<View>{CompArray}</View>);
 }