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

Question

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

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

预期结果：

<li>testing                  John</li>

实际输出：

<li>testing John</li>

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

与此相关：但是我应该如何处理填充呢？

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>

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

(jsx) Use padEnd in an element's text

html

javascript

padding

jsx

reactjs