javascript - 渲染后如何用 span 标签包装字符
问题描述
我有一个随机生成的字符串作为道具传递给子组件。它显示在段落标签中。示例字符串可以是:
猫、狗、鸟
鸟, 鱼, 仓鼠, 鹅
猫、鱼、狗
ETC..
class Example extends React.Component {
state = {
string: ''
};
componentDidMount() {
let newString = this.props.passedString.replace(',', '<span>,</span>');
this.setState({string: newString});
}
render() {
return (
<div><p>{this.state.string}</p></div>
)
};
}
我想在子组件段落内的每个逗号周围添加标签。我尝试添加componentDidMount
将每个逗号替换为包含在字符串中的 span 标签中的逗号的方法,但出于显而易见的原因,这只是将 span 标签添加为字符串的一部分,我不知道如何在 html 中将它们显示为实际标签或者如何修改已经渲染的段落。
解决方案
您可以使用String#split
和Array#map
方法来生成满足您要求的 JSX:
/* Split the input randomString by `,` in to an array of string part */
const stringParts = randomString.split(',');
/* Use map to transform each string part to a React.Fragment. Prepend a
comma enclosed by <span> for any string part that's not the first in
the array */
const wrappedParts = stringParts.map((stringPart, index) => {
return <React.Fragment>
{ index === 0 ? null : <span>,</span>}{stringPart}
</React.Fragment>
})
这是一个功能组件,展示了这一点:
span {
background:lightgrey;
margin:0.1rem;
}
<div id="module"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0/umd/react-dom.production.min.js"></script>
<script type="text/babel">
const MyComponent = (props) => {
const { randomString } = props;
return randomString.split(',').map((stringPart, index) => {
return <React.Fragment>{ index === 0 ? null : <span>,</span>}{stringPart}</React.Fragment>
})
}
ReactDOM.render(
<div>
<MyComponent randomString={ 'bird, fish, hamster, goose' } />
<hr/>
<MyComponent randomString={ 'cat, dog, bird' } />
<hr/>
<MyComponent randomString={ 'cat, fish, dog' } />
</div>,
document.getElementById("module"));
</script>
推荐阅读
- flutter - Flutter 无法获取下载地址 firebase-storage
- three.js - 旋转时物体不重叠
- powershell - 使用 Start-Process 运行 .bat 文件时
- html - 如何使用 postgres 数据库中的值动态填充 html 下拉列表?
- bash - 使用 bash 从 ubuntu 上的文件中读取具有未转义字符的 env 变量
- python-3.x - 查找日期范围内的最早日期
- typescript - 如何使用 vscode 在 Yarn2 工作区中调试打字稿?
- amazon-dynamodb - DynamoDBMapper 如何在不分页的情况下获取所有项目
- python - 具有 nans 的数据框列的移动平均值
- r - 在 Windows 上安装 addmtoolbox:x 不是 data.table (RStudio)