使用React傳遞道具來渲染有效的href

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那麼你會得到適當芯子。

例如：

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

感謝這個要點：https://gist.github.com/mathewbyrne/1280286