Javascript 在另一个文本组件内部添加本机文本组件

我有一个文本组件

<Text ref="text" style{...}>{this.state.te}</Text>

只需一个

元素，它就可以很好地呈现文本

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

编辑：

---

this.state.te持有

te:

好的，查看下面的内容。我基本上创建了一个文本值数组，该数组位于两个

字段之间，当调用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>
    );

getInitialState:function（）{
返回{
特：[哟]，
索引：1
}
},
insertText:function（）{
这个州，这个州(
文本编号{this.state.index}
)
这是我的国家({
索引：this.state.index+1，
泰：这个州
})
},
render:function（）{
var MyText=函数（t）{
返回(
{t}
)           
}
返回(
{MyText（this.state.te）}
this.insertText（）}style={{{marginTop:20，height:60，flexDirection:'row'，backgroundColor:'#eded'，justifyContent:'center'，alignItems:'center'}>
添加文本
);

我已经制定了完整的工作计划。完整代码也发布在下面

“严格使用”；
var React=require（'React-native'）；
变量{
评估学，
样式表，
文本
看法
可触摸高光
}=反应；
var SampleApp=React.createClass({
getInitialState:函数（）{
返回{
特：[哟]，
索引：1
}
},
insertText:function（）{
这个州，这个州(
文本编号{this.state.index}
)
这是我的国家({
索引：this.state.index+1，
泰：这个州
})
},
render:function（）{
var MyText=函数（t）{
返回(
{t}
)           
}
返回(
{MyText（this.state.te）}
this.insertText（）}style={{{marginTop:20，height:60，flexDirection:'row'，backgroundColor:'#eded'，justifyContent:'center'，alignItems:'center'}>
添加文本
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
玛金托普：60
}
});
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；

你能展示一下这个.state.te包含什么吗？谢谢。我已经编辑了我的帖子。thanksI也尝试过这个.refs.text.pops.children.\uuuu proto\uuuu.push（新节点）；但这并没有增加任何孩子。相同的结果将“[object]…+[object]”添加到array@AKADER如果我想附加TextInput而不是Text，该怎么办？@SatanPandeya您是否用

TextInput

尝试过接受答案代码？我猜同样的事情也会发生。我不能尝试我的新mac电脑还没有安装好，我刚买了它。哇，谢谢，我没想到解决方案会这么简单。干得好。

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

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

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

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