將字符串附加到JSX

在下面的代碼示例中，只有在設置了twitter props的情況下，我才需要添加字符串「：」。什麼是正確的方法來做到這一點？將字符串附加到JSX

let User = React.createClass({ 
    render: function() { 
     let twitter = (this.props.twitter) ? (this.renderTwitter(this.props.twitter)) : null; 
     return (<div>{this.props.name} : {twitter}</div>) 
    }, 
    renderTwitter: function(twitter) { 
     return (<a href={'http://www.twitter.com/' + twitter} >Twitter</a>) 
    } 
}) 


let App = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <h1>User List</h1> 
       <User name="User 1" twitter="handle1"/> 
       <User name="User 2"/> 
      </div> 
     ) 
    } 
}) 

ReactDOM.render(<App />, document.getElementById("root"));

嘗試了以下內容：

render: function() { 
    let twitter = (this.props.twitter) ? " : " + (this.renderTwitter(this.props.twitter)) : null; 
    return (<div>{this.props.name} : {twitter}</div>) 
}

嘗試這樣還有：

renderTwitter: function(twitter) { 
    return (: <a href={'http://www.twitter.com/' + twitter} >Twitter</a>) 
}

來源

2017-02-12 Albin

只要使用額外的HTML標籤作爲包裝，看到這個小提琴。 [https://jsfiddle.net/0baspe5t/](https://jsfiddle.net/0baspe5t/） –

你想添加「：」後twitter鏈接（錨標記） –

當然，我會添加它。 –

您可以用另一個標籤包裝你的錨標記。

return (
    <span> 
     :&nbsp; 
     <a href={'http://www.twitter.com/' + twitter}> 
      Twitter 
     </a> 
    </span> 
)

這裏是工作提琴：JSFiddle

在一個單獨的功能做的，這是它的可重用性的效益。如果你需要在其他地方顯示twitter句柄，你可以調用這個函數。

來源

2017-02-12 09:01:41

試試這個：

render: function() { 
     return (
      <div> 
       {this.props.name} : 
       {this.props.twitter?<span>:<a href={'http://www.twitter.com/' + twitter}>Twitter</a></span>:null} 
      </div> 
     ) 
    },

來源

2017-02-12 08:22:13

糾正我，如果我錯了，但這不會拋出語法錯誤，因爲你使用三元運算符錯誤（使用2個冒號）？當提到第一個冒號（在標籤後面）時，編譯器如何知道您是指html？ – Albin

不，因爲第一個冒號位於span標籤內，因此它被視爲span標籤的HTML元素。 JSX通過開始標記和結束標記來標識HTML標記的主體，這裏第一個冒號位於關閉span標記之前，JSX認爲它在span標記的主體中。如果您希望格外小心，可以將完整標記放入括號，如{this.props.twitter？（：Twitter）：null} –

您還應該考慮代碼的重用性。在你的情況下，如果我想在其他地方使用相同的功能，我不能使用它。我需要複製粘貼相同的代碼。所以最好將通用代碼移到單獨的函數中，以便可以重用。 –

這個怎麼樣：

const User = React.createClass({ 
    render: function() { 
    const { twitter } = this.props; 
    return (
     <div> 
     {this.props.name} 
     {twitter && (
     <span> 
      :&nbsp; 
      <a href={`http://www.twitter.com/${twitter}`}> 
      Twitter 
      </a> 
     </span> 
     )} 
     </div> 
    ); 
    } 
});

demo here

我們正在從道具twitter，然後我們使用

{twitter && (/*something to render*/)}

所以它會只如果Twitter被渲染truthy

來源

2017-02-12 11:42:00 pie6k

最好的解決方案恕我直言，它展示瞭如何使這個w/o污染與其他標籤並結合JSX和文本。 –

將字符串附加到JSX

回答

相關問題