Question

const text = "Test Text";
      text = text + <Text style={styles.text2}>Test Text2</Text>;
      text = text + <Image source={this.testImage} />;
      text = text +  "Test"

如果此String值为ReactNative 用<Text> {text} </ Text>

检查

Test Text [obejct Object] [object Object] Test 如何使[object Object]成为真正的组成部分？

'Test Text${<Text>1</Text>}'

我已经尝试过了，但是还是一样。

'Test Text <Text>1</Text>'

这看起来是：Test Text <Text> 1 </ Text>

Answer 1

您不必使它成为字符串并尝试连接组件，而是使其成为一个大型JSX节点：

const text = <>
    Test Text
    <Text style={styles.text2}>Test Text2</Text>
    <Image source={this.testImage} />
    Test
</>;

如果您希望具有动态添加内容的灵活性，也可以将其存储在变量中，并使用条件决定内容，例如：

const textComponent = (myEvaluator) ?     <Text style={styles.text2}>Test Text2</Text> : <></>;
const imageComponent = (userHasImage) ? <Image source={this.testImage} /> : <></>;

const text = <>
    Test Text
    {textComponent}
    {imageComponent}
    Test
</>;

如果要制作各种用户组件，则可以使用道具控制它。像这样：

const UserProfile = ({user}) => {

    return (

        <div>
            <p>Username: {user.username}</p>
            <p>First name: {user.first_name}</p>
            <p>Last Name: {user.last_name}</p>
            {user.picture && <Image src={user.picture.src} />}
        </div>

    );

}

export default UserProfile;

如果您绝对需要使用字符串，则需要将其转换为JSX，您可以使用babel来实现：

import babel from 'babel-core';
var myComponent = eval(babel.transform('<>Test Text <Text style={styles.text2}>Test Text2</Text></>).code);

如何通过字符串来响应本机组件

1 个答案: