reactjs - 如何在 reactjs 中以适当的间距、换行符和格式显示响应？

Question

我从 OpenAi 获取响应并使用 React UseState 存储它

const [response, setResponse] = useState();

try {
  const res = await axios.post('https://api.openai.com/v1/completions', body, config)
  const completions = res.data.choices[0].text
  console.log(completions)
  setResponse(completions)
  setLoading(false)
} catch (err) {
  console.error(err)
  setLoading(false)
}

当我控制它以这种方式出现的响应时

当使用此代码显示时..

{loading ? (
        <div className='block p-2.5 h-full w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300  dark:bg-gray-700 dark:border-gray-600  dark:text-white '>loading...</div>
      ) : (
        <div className="block p-3 h-full w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300  dark:bg-gray-700 dark:border-gray-600  dark:text-white " >
          {response}
        </div>
      )}

它看起来像这样:

Answer 1

div 元素不解析空格或回车。作为您问题的解决方案，我建议使用 <pre> tag或者使用 css 属性 white-space ( white-space: pre; )