阵营本地追加文本组件另一文本组件的内部

Question

我有一个文本组件

<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]"文本组件

如果我使用

this.setState({te: <Text style={...}>{this.refs.newText.props.value}</Text>}) 

它会呈现文本就好了单<Text></Text>内元件。

任何帮助，将不胜感激。谢谢。

编辑：

this.state.te持有te: <Text></Text>

Answer 1

好吧，看看我有什么下文。实际上，我创建了一个位于两个<Text>字段之间的文本值数组，并且在调用insertText函数时，它会将新的文本元素推送到该数组，然后将该数组的状态重置为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> 
    ); 

我已经设置了完整的工作项目here。完整的代码也发布在下面。

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