时间戳

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

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

问题描述

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

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

我要将名称中的空格更改为-。我将使用条件渲染对其进行更改，但是如何更改下面的代码？

标签： reactjstsx

解决方案

这是对您提供的代码的轻微调整，应该可以实现您想要的。渲染项目列表时，请确保为每个元素分配一个唯一键。

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

推荐阅读