php - 此 React 应用程序中的实际数据和演示数据不同

Question

我在 React 中渲染时是否遗漏了一些东西？

数据库中保存的数据为:

actual data
is
this

用React渲染后，数据变成这样:

actual data is this

我检查了所有数据点，从表单到使用 Ajax 发送并添加到数据库。数据与正在发送的数据相同。并且不存在任何符合 display:inline 规则的 CSS 内容。

Answer 1

给定字符串中的换行符 ( '\n' ) 不会导致呈现的 HTMl 中出现换行符。您可以添加<br/>标签放在行尾，或者将它们包裹在 <p> 中标签:

App.jsx

const React = require('react');
const reactDOM = require('react-dom');

function App(props) {
  const breaks = props.string2.split('\n').map((line) => <span>{line}<br /></span>);
  const paragraphs = props.string3.split('\n').map((line) => <p>{line}</p>);

  return (
    <div>
      <div>
        {props.string1}
      </div>
      <div>
        {breaks}
      </div>
      <div>
        {paragraphs}
      </div>
    </div>
  );
}

const string1 = 'will\n all\n be\n one\n line';
const string2 = 'will\n be\n on\n different\n lines\n with\n breaks';
const string3 = 'will\n be\n on\n different\n lines\n with\n paragraphs';

reactDOM.render(<App string1={string1} string2={string2} string3={string3} />, document.getElementById('app'));

这将呈现:

will all be one line
will
be
on
different
lines
with
breaks
will

be

on

different

lines

with

paragraphs