[英]how to render array of component inside Text component in react native?
[英]React Native appending Text component inside of another Text Component
我有一个文字部分
<Text ref="text" style{...}>{this.state.te}</Text>
我想插入和附加其他<Text></Text>
所以当事件触发按钮时,我希望它插入一个新的<Text></Text>
看起来像这样
<Text ref="text" style{...}>
<Text ref="text" style{...}>first</Text>
<Text ref="text" style{...}>second</Text>
<Text ref="text" style{...}>third</Text>
</Text>
这就是我的活动
insertText(){
this.setState({te: this.state.te + <Text style={...}>{this.refs.newText.props.value}</Text>})
}
当我这样做时,它呈现的全部是"[object object]"
文本组件"[object object]"
内部的"[object object]"
如果我用
this.setState({te: <Text style={...}>{this.refs.newText.props.value}</Text>})
它将使用单个<Text></Text>
元素将文本渲染得很好。
任何帮助,将不胜感激。 谢谢。
编辑:
this.state.te持有te: <Text></Text>
好吧,看看我下面有什么。 我实质上已经创建了一个文本值数组,该文本值数组位于两个<Text>
字段之间,并且在调用insertText函数时,它将一个新的text元素压入该数组,然后将该数组的状态重置为te
属性。 :
getInitialState: function() {
return {
te: [<Text>Yo</Text>],
index:1
}
},
insertText: function() {
this.state.te.push(
<Text>Text number {this.state.index}</Text>
)
this.setState({
index: this.state.index + 1,
te: this.state.te
})
},
render: function() {
var MyText = function(t) {
return(
<Text>
{t}
</Text>
)
}
return (
<View style={styles.container}>
{MyText(this.state.te)}
<TouchableHighlight onPress={ () => this.insertText() } style={{ marginTop:20, height:60, flexDirection: 'row', backgroundColor: '#ededed', justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 22 }}>Add Text</Text>
</TouchableHighlight>
</View>
);
我已经在这里设置了完整的工作项目。 完整代码也发布在下面。
https://rnplay.org/apps/Itk6RQ
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
var SampleApp = React.createClass({
getInitialState: function() {
return {
te: [<Text>Yo</Text>],
index:1
}
},
insertText: function() {
this.state.te.push(
<Text>Text number {this.state.index}</Text>
)
this.setState({
index: this.state.index + 1,
te: this.state.te
})
},
render: function() {
var MyText = function(t) {
return(
<Text>
{t}
</Text>
)
}
return (
<View style={styles.container}>
{MyText(this.state.te)}
<TouchableHighlight onPress={ () => this.insertText() } style={{ marginTop:20, height:60, flexDirection: 'row', backgroundColor: '#ededed', justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 22 }}>Add Text</Text>
</TouchableHighlight>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 60
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.