使用this.props.children

Question

我遇到的问题是，我有一个文本组件，可以设置样式并进行文本呈现。为了呈现文本，我收到了传递值的this.props.children。这些值需要对HTML进行清理并显示在Text组件中，所以我想知道是否有办法执行此操作。当我尝试使用时，文本不会显示，因为this.props.children不是HTML。

有关如何处理此问题的任何建议？这是在React-Native中完成的 这是我用来传递给我的组件的东西，它从另一个组件传递'text'：

<View style={{ width: '100%' }}>
            <Montserrat
              regular
              style={{
                marginTop: 15,
                color: config.colors.commentText,
                fontSize: 14,
                lineHeight: 20,
                fontWeight: "400",
                paddingLeft: 50,
                paddingRight: 50
              }}
            >
              {this.props.text}
            </Montserrat>
          </View>

在我们的文本组件中传递文本值：

export class Montserrat extends React.Component {
  base = "Montserrat";

  defaultStyle = {
    color: config.colors.darkText,
    fontSize: 22,
    lineHeight: 30,
  };

  getFontFamily = () => {
    const base = "Montserrat"
    if (this.props.light) {
      return `${base}-Light`
    }

    if (this.props.medium) {
      return `${base}-Medium`
    }

    if(this.props.semiBold) {
      return `${base}-SemiBold`
    }

    if(this.props.regular) {
      return `${base}-Regular`;
    }

    return base;
  }

  render() {
    const style = { ...this.defaultStyle, ...this.props.style, fontFamily: this.getFontFamily() };

    return <Text style={style} {...this.props}>{this.props.children}</Text>;
  }
}
}