如何使用渲染解决方案重新创建代码

Question

let nickName:string = "Laruo May";
let spaicing:string[] = nickName.split("");

const hello:JSX.Element = <div>
                              {spaicing.map((space:string) => <div>{letter.replace(" ", "*-*")}</div>)}   
                            </div>

我要把名字中的空格改成-。我打算使用条件渲染来改变它，但是我该如何改变下面的代码呢？

Answer 1

以下是对您提供的代码的轻微调整，应该可以实现您想要的效果。渲染项目列表时，请务必为每个元素分配一个unique key。

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.15.7/babel.min.js"></script>

<div id="main"></div>

<script type="text/babel" data-type="module" data-presets="typescript,react">

const nickName = 'Laruo May';

const element = (
  <div>
    {[...nickName].map((letter, index) => (
      <div key={`${index}${letter}`}>{letter.replace(' ', '*-*')}</div>
    ))}   
  </div>
);

ReactDOM.render(element, document.getElementById('main'));

</script>

Answer 2

您可以使用replaceAll()。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll

let nickName = "Laruo May";
let spaicing = nickName.replaceAll(" ", "-").split("");

console.log(spaicing)