在三元操作中使用 react JSX 和 HTML 并且无法正确显示它

Question

the variable twitter_username resolves to either a username or null.

 {{twitter_username}?<p>@{twitter_username}</p>:null}

I want this to display @username if there is a username or nothing at all if the value is null. If there is a username it displays fine but if the return is null I get an @ instead of nothing.

 {{twitter_username}?<p>{twitter_username}</p>:null}

this code returns the username if there is a username and is blank when there is none.

Answer 1

a nice and easy way to do it { twitter_username && (<p>@{twitter_username}</p>) }

Here the left part of the ternary operator will continue to the right only if the first part (twitter_username) if defined. The right part is a return statement who returns jsx