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

显示react-native组件数组

2 个答案: