Question

反应世界的新手，所以要好看:-)我想把道具传递给像<a href={this.props.text} </a>这样的链接，但我想将其转换为“有效”链接，这样如果我通过像“新反应”这样的动态内容会转换为/new-to-react。

我该如何解决这个问题呢？我找了React组件但什么都没找到。

有道理吗？任何意见都非常感谢，谢谢。

Answer 1

您可以使用此实用程序功能将文本更改为slug。

function slugify(text){
  return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
}

因此，如果你用slugify包装你的this.props.text，那么你将获得适当的slu ..

例如：

如果this.props.text为'Hello World'，{slugify(this.props.text)}将为'hello-world'

归功于这个要点：https://gist.github.com/mathewbyrne/1280286

使用React传递道具渲染有效的href

1 个答案: