将字符串附加到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

回答

相关问题