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

React Native将Text组件附加到另一个Text Component

1 个答案: