时间戳

首页 > 解决方案 > React - 添加换行符；

javascript - React - 添加换行符；

问题描述

所以我有一个功能可以每 60 个字符添加一个换行符。现在我不明白为什么 \n 不起作用。

function countStr (str1){
    let str2="";
    let charCount=0;
    for(let i=0; i<str.length; i++){
            if(i%60===0){
            str2=str2.concat(str1.substring(charCount,i));
            str2+="\n";
            charCount=i;
            
        }
    }
    return str2;
}


const About = () =>{
 
    return(

        <div className="about">
         <h2>I'm Gal</h2>
         <p>{changedStr}

</p>
        </div>

    );
}
export default About;

标签： javascriptreactjs

解决方案

循环输入字符串。如果当前迭代在i % 20（也不为零）添加换行符。添加输入字符串中的字符。

在渲染字符串的组件中，您需要向该元素添加一些 CSS，以便正确打印：white-space: pre-line.

function countStr(str) {
  let out = '';
  for (let i = 0; i < str.length; i++) {
    if (i % 20 === 0 && i !== 0) out += '\n';
    out += str[i];
  }
  return out;
}

// Example string of 220 characters
let str = '';

for (let i = 0; i < 220; i++) {
  str += '1';
}

function Example({ str }) {
  return (
    <div>{str}</div>
  );
};

ReactDOM.render(
  <Example str={countStr(str)} />,
  document.getElementById('react')
);
div { white-space: pre-line; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

推荐阅读