javascript - React Native 在另一个文本组件中附加文本组件
<p><p>我有一个文本组件</p>
<pre><code><Text ref="text" style{...}>{this.state.te}</Text>
</code></pre>
<p>我想插入和附加其他 <code><Text></Text></code></p>
<p>所以当事件在按钮上触发时，我希望它插入一个新的 <code><Text></Text></code> 看起来像这样</p>
<pre><code><Text ref="text" style{...}>
<Text ref="text" style{...}>first</Text>
<Text ref="text" style{...}>second</Text>
<Text ref="text" style{...}>third</Text>
</Text>
</code></pre>
<p>这就是我的事件的样子</p>
<pre><code>insertText(){
this.setState({te: this.state.te + <Text style={...}>{this.refs.newText.props.value}</Text>})
</code></pre>
<p>}</p>
<p>当我这样做时，它呈现的是文本组件内的 <code>""</code></p>
<p>如果我使用</p>
<pre><code> this.setState({te: <Text style={...}>{this.refs.newText.props.value}</Text>})
</code></pre>
<p>它会使用单个 <code><Text></Text></code> 元素很好地呈现文本。</p>
<p>任何帮助将不胜感激。谢谢。</p>
<p>编辑:</p>
<p>this.state.te 包含 <code>te: <Text></Text></code></p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>好的，看看我下面的内容。我基本上创建了一个文本值数组，它们位于两个 <code><Text></code> 字段之间，当调用 insertText 函数时，它将一个新的文本元素推送到数组中，然后重置状态<code>te</code> 属性的数组:</p>
<pre><code>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>
);
</code></pre>
<p>我已经建立了完整的工作项目<a href="https://rnplay.org/apps/Itk6RQ" rel="noreferrer noopener nofollow">here</a> .完整的代码也贴在下面。</p>
<p> <a href="https://rnplay.org/apps/Itk6RQ" rel="noreferrer noopener nofollow">https://rnplay.org/apps/Itk6RQ</a> </p>
<pre><code>'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);
</code></pre></p>
<p style="font-size: 20px;">关于javascript - React Native 在另一个文本组件中附加文本组件，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/34091257/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/34091257/
</a>
</p>
页:
[1]