React Native將Text組件添加到另一個Text組件中

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]"文本組件"[object object]"內部的"[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函數時，它將一個新的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);