javascript - 渲染包含样式代码的字符串

Question

我有一个包含问题和答案的数组。我有一个组件将导入数组然后输出内容。

但是，我现在需要添加特定的样式。在我看来，应该可以将内联样式添加为字符串文字，但这不起作用:

questionList.js

import React from "react";
import { Text } from "react-native";

export const questions = [
  {
    question: `This is regular text: ${(
      <Text style={{ fontWeight: "bold" }}>
        But this should be bold!
      </Text>
    )This is also regular text`,
    choices: [
      "Answer 1",
      "Answer 2",
      "Answer 3",
      "Answer 4",
    ]
  }
]

RenderQuestion.js

import React from "react";
import { Text, View } from "react-native";
import { questions } from "../Data/questionList";

export const Question = () => (
  <View>
    <Text>{questions[0].question}</Text>
  </View>
);

我得到的输出如下:这是常规文本:[object Object] 这也是常规文本

有办法做到这一点吗？ 应该我应该这样做吗？

Answer 1

您需要修复您的问题数据，以将一个组件而不是一个字符串作为问题。

这样的事情应该有效:

export const questions = [
  {
    question: <Text>This is regular text: 
      <Text style={{ fontWeight: "bold" }}>
        But this should be bold!
      </Text>
      This is also regular text</Text>,
    choices: [
      "Answer 1",
      "Answer 2",
      "Answer 3",
      "Answer 4",
    ]
  }
];

如果您希望数据更具可读性并更容易应用简单的样式，另一种选择是使用一些 Markdown 模块。

例如像这样的react-native-simple-markdown