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

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>

我要把名字中的space改成-。我将使用条件渲染来更改它，但我该如何更改下面的代码？

Answer 1

您可以使用 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)

Answer 2

这里对您提供的代码稍作调整，应该可以实现您想要的效果。呈现项目列表时，请务必为每个元素分配 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>

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

How to recreate the code using Rendering solution

reactjs

tsx