React - 添加换行符；

Question

So I have a function for adding a line break every 60 characters. Now what I don't understand is why the \\n doesnt work.

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;

Answer 1

Loop over the input string. If the current iteration is at i % 20 (and also not zero) add a line-break. Add the character from the input string.

In your component that's rendering the string you need to add some CSS to that element so it prints properly: 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>

Answer 2

Use this simple function

function countStr(str) {
  let str2 = '';
  while (str.length > 0) {
    str2 += str.substring(0, 60) + '\n';
    str = str.substring(60);
  }
  return str2;
}

Answer 3

如果你在 React 中使用它并且它正在访问网络，那是因为你可能需要一个<br/>而不是 \\n