[英]React Native appending Text component inside of another Text Component
I have a text component 我有一个文字部分
<Text ref="text" style{...}>{this.state.te}</Text>
and I would like to insert and append other <Text></Text>
我想插入和附加其他
<Text></Text>
so when the event fires on a button I want it to insert a new <Text></Text>
to look like this 所以当事件触发按钮时,我希望它插入一个新的
<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>
this is what my event looks like 这就是我的活动
insertText(){
this.setState({te: this.state.te + <Text style={...}>{this.refs.newText.props.value}</Text>})
} }
when I do this all it renders is "[object object]"
inside of the Text Component 当我这样做时,它呈现的全部是
"[object object]"
文本组件"[object object]"
内部的"[object object]"
if I use 如果我用
this.setState({te: <Text style={...}>{this.refs.newText.props.value}</Text>})
it will render the text just fine with a single <Text></Text>
element. 它将使用单个
<Text></Text>
元素将文本渲染得很好。
any help would be appreciated. 任何帮助,将不胜感激。 Thanks.
谢谢。
Edit: 编辑:
this.state.te holds te: <Text></Text>
this.state.te持有
te: <Text></Text>
Ok, check out what I have below. 好吧,看看我下面有什么。 I've essentially created an array of text values that are place in between two
<Text>
fields, and when the insertText function is called, it pushes a new text element to the array, then resets the state of the array to the te
property: 我实质上已经创建了一个文本值数组,该文本值数组位于两个
<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>
);
I've set up the full working project here . 我已经在这里设置了完整的工作项目。 Full code is also posted below.
完整代码也发布在下面。
https://rnplay.org/apps/Itk6RQ 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.