วิธีที่ง่ายที่สุดในการใช้งาน onClick เพื่อเรนเดอร์ ‹img› ใน React?

ฉันกำลังมองหาวิธีแสดงภาพเมื่อปุ่มเปิดอยู่ ดูเหมือนเป็นงานที่เรียบง่ายเพียงพอ และจะช่วยให้ฉันเข้าใจวิธีดำเนินการได้อย่างมาก ฉันได้ลองสิ่งนี้แล้ว แต่มันไม่แสดงผลอะไรเลย

นี่คือฟังก์ชันที่ส่งคืนรูปภาพ svg:

import dfElement from '../vectors/dfElement.svg';

function renderElement(){
  return  <img src={dfElement}/>
}

นี่คือคลาสที่เรียกใช้ฟังก์ชันเพื่อส่งคืน svg:

class DF extends Component {

    render() {

      return (

      <div >

        <div >
        <button onClick={this.renderElement}>df</button>
        </div>

      </div>
    );
  }
}

export default DF

reactjs javascript jsx
person neutrino    schedule 13.05.2020    source แหล่งที่มา
comment
คุณมีข้อผิดพลาดอะไรในคอนโซล?   -  person Arturas Lapinskas    schedule 13.05.2020

คำตอบ (1)


arrow_upward
3
arrow_downward

ฉันใช้ Functional Component กับ useState()

มันเป็นวิธีที่ง่ายกว่าในการสร้างส่วนประกอบ

อ้างอิง > https://en.reactjs.org/docs/hooks-intro.html< /ก>

function App(){
  const [toggle, setToggle] = React.useState(false);
  
  return (
    <div>
      <button onClick={()=>setToggle( (prev) => (!prev) )}>Toggle!</button>
      <br/>
      {
        toggle && <img src='https://2.imimg.com/data2/LQ/QV/MY-/teddy-small-size-500x500.jpg' />
      }
    
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />

person kyun    schedule 13.05.2020