ReactJS：我需要知道反应代码的行为

Question

我有这个组件，如果单击div，则试图仅显示符号，如果在div单击变量unclicked（代码的注释部分）并将其向下传递之前，将代码显示在div上，则会注意到一件事在三元运算符中，它不会显示图像并且会中断，但是，如果我通过代码本身，它会正常工作，你知道为什么会这样吗？

import React, { PureComponent } from "react";
import PropTypes from "prop-types";

import EmojiDisplay from './EmojiDisplay';

class EmojiResultsRow extends PureComponent {

  state = {
    clicked: false
  }

  handleClick = () => {
    this.setState((state) => ({
      clicked: !state.clicked
    }))
  }

  render() {
    //let unClicked =  
    //  <span >
    //    <img alt={this.props.title} src={src} />
    //    <span className="title">{this.props.title} 
    //    </span>
    //    <span className="info">Click to copy emoji
    //    </span>
    // </span>
    const codePointHex = this.props.symbol.codePointAt(0).toString(16);
    const src = `//cdn.jsdelivr.net/emojione/assets/png/${codePointHex}.png`;
    return (
      <div 
        className="component-emoji-result-row copy-to-clipboard"
        data-clipboard-text={this.props.symbol}
        onClick={this.handleClick}
      >{
         this.state.clicked ? <EmojiDisplay symbol={this.props.symbol} />:
         <span >
          <img alt={this.props.title} src={src} />
          <span className="title">{this.props.title}</span>
          <span className="info">Click to copy emoji
          </span>
         </span>
       }
      {/* {this.state.clicked ? 
            <EmojiDisplay symbol={this.props.symbol}/> 
           : unClicked} */}
      </div>
    );
  }
}
EmojiResultsRow.propTypes = {
  title: PropTypes.string,
  symbol: PropTypes.string
};
export default EmojiResultsRow;