将字符串附加到 JSX

Question

在下面的代码示例中，仅当设置了 twitter 道具时，我才需要添加字符串“:”。正确的做法是什么？

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>)
}

Answer 1

试试这个：

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

Answer 2

您可以用另一个标签包裹您的锚标签。

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

这是工作 fiddle：JSFiddle

在单独的函数中执行此操作的好处是 re-usability。如果你需要在其他地方显示推特句柄，你可以调用这个函数。

Answer 3

这个怎么样：

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

我们从 props 得到 twitter，然后我们使用

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

因此只有当推特真实

时才会呈现

将字符串附加到 JSX

Append string to JSX

reactjs

react-jsx