React Native appending Text组件位于另一个Text组件内部

React Native appending Text component inside of another Text Component

本文关键字：Text 组件 另一个 内部 Native React appending      更新时间：2023-09-26

我有一个文本组件

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

它将用单个CCD_ 4元素来渲染文本。

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

编辑：

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

好的，看看下面的内容。我实际上已经创建了一个文本值数组，这些值位于两个<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>
    );

我已经在这里建立了完整的工作项目。完整的代码也张贴在下面。

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);
相关文章：