显示react本机组件阵列

Question

我有一组react本地组件，希望在视图中一次显示所有组件，但我一直收到错误

RawText〔object object〕必须包装在显式组件中

并将其显示在文本中不会得到所需的结果，我该如何处理？

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>);
}