Question

我有一个对象属性block.content，就像我想要在<div/>中显示的那样，但<p>在文本正确包含在{{<div/>内时突出显示1}}：

var block = {
"content": `<a href=\"http:\/\
               /twitter.com\/ngun\" target=\"_blank\">@ngun<\/a> `
};

如何让block.content包含在<div>内？

Answer 1

将其作为道具传递给组件：

class Foo extends React.Component{ 
  render() {

    return (
      <Card>
        <CardText>
          <div> {this.props.content} </div>
        </CardText>
      </Card>
    )
  }
}
<Foo content={{content}} />

或者如果您想使用dangerouslySetInnerHTML，可以尝试：

class Foo extends React.Component{ 
  render() {

    return (
      <Card>
        <CardText>
          <div dangerouslySetInnerHTML={{__html: this.props.content}}/>
        </CardText>
      </Card>
    )
  }
}
<Foo content={{content}} />

Answer 2

因为卡片中的img标签可以设置为任意大小的图像，所以您需要限制其最大尺寸，以使其适合您的卡片。例如，如果您的卡片是300x300像素，但图像可以是1000x1000，那么您需要调整img标签的大小以匹配其HTML容器（DIV）的大小而不是图像本身。为此，您需要在动态内容的容器元素上应用CSS类。

在CSS中：

.dynamic-content-div img {
  /* Set width of image to maximum width of Card, height will follow aspect ratio */
  width: 100%;
}

JSX：

var block = {
  "content": `<p><img src=\"http:\/\/media.tumblr.com\
               /tumblr_lh6x8d7LBB1qa6gy3.jpg\"\/><a href=\"http:\/\
               /citriccomics.com\/blog\/?p=487\" target=\"_blank\">TO READ
               THE REST CLICK HERE<\/a><br\/>\n\nMilky Dog was inspired by
               something <a href=\"http:\/\/gunadie.com\/naomi\"
               target=\"_blank\">Naomi Gee<\/a> wrote on twitter, I really
               liked the hash tag <a href=\"http:\/\/twitter.com\/
               search?q=%23MILKYDOG\" target=\"_blank\">#milkydog<\/a>
               and quickly came up with a little comic about it. You can
               (and should) follow Naomi on twitter <a href=\"http:\/\
               /twitter.com\/ngun\" target=\"_blank\">@ngun<\/a> `
};

return (
  <Card style={{ width: 200, height: 300, overflow: 'auto' }}>
    <CardText>
      <div className="dynamic-content-div" dangerouslySetInnerHTML={{ __html: block.content }}/>
    </CardText>
  </Card>
);

jsFiddle这里：https://jsfiddle.net/4wm2drpt/

Answer 3

你实际上这样做很好，但你的内容缺少一个结尾的p标签。 </p>可能会丢弃您的HTML结构。

如何保持<div>中包含的内容？

3 个答案: