javascript - (jsx) 在元素的文本中使用 padEnd

Question

const text = 'testing'.padEnd(25) + 'John'

return (
    <li>{text}</li>
)

预期结果:

<li>testing                  John</li>

实际输出:

<li>testing John</li>

获得预期结果的最简单方法是什么？

与此相关:Best practice when adding whitespace in JSX但是我应该如何处理填充呢？

Answer 1

您可以使用 HTML 标签 <pre> , 维护呈现的文本，包围 text变量。

class Example extends React.Component {
  render() {
    const text = 'testing'.padEnd(25) + 'John';
    return (
      <div><pre>{text}</pre></div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>