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

时间:2017-02-13 17:02:57

标签: reactjs

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

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

有道理吗?任何意见都非常感谢,谢谢。

1 个答案:

答案 0 :(得分:2)

您可以使用此实用程序功能将文本更改为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