如何在Semantic UI React中将内容绑定到段？

Question

我正在使用带有React的语义UI。我想在<code><pre>{ obj: value }</pre></code>组件中显示外部api响应对象。虽然响应是填充的，但它不受<code>标记的限制或包裹（见下图）。使用语义UI将内容保持在<code>内的正确方法是什么？

组件

<div className="four wide column" />
  <div className="eight wide column">
    <div className="ui segment">
      <code>
        <pre>{JSON.stringify(this.props.response, null, 2)}</pre>
      </code>
    </div>
  </div>
<div className="four wide column" />

结果