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

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

这里对您提供的代码做了一个小小的调整，应该可以达到您想要的效果。在呈现项列表时，请确保为每个元素分配唯一的键。

<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)