在React中使用函數作爲道具

Question

這是我正在嘗試做的一個簡化示例。我想要做的就是通過道具將這些功能傳遞給React的不同組件。我可以將文本傳遞給道具，並通過做<button onClick={popup}>直接調用函數，但這不是我實驗的目的。 onClick不會觸發該函數，並且在渲染時console.log中存在「uncaught」錯誤，這是無用的。

const Elem = (props) =>{ 
    return (<div> 
    <h1> hi {props.name} {props.last} phase two </h1> 
    <button onClick={props.clickon}> {props.text} </button> 
     </div> 
); 
}; 

function popup(){ 
    alert("It works!") 
} 

class App extends React.Component{ 
    constructor(props) { 
    super(props); 
} 
    render(){return (<Elem name = 'paul' last='shreeman' clickon='popup' text='PushMe'/> 
) 
}} 

ReactDOM.render(
<App />, document.getElementById('root')) 

這裏的鏈接到codepen：https://codepen.io/pkshreeman/pen/GENmaG?editors=0010

Answer 1

原因是，你是不是經過function您傳遞一個字符串，傳遞一個function你需要把它寫這樣的：

clickon = {popup} 

現在它會通過function popup，而不是string "popup"。

全碼：

class App extends React.Component{ 
    constructor(props) { 
     super(props); 
    } 

    render(){ 
     return (
      <Elem name='paul' last='shreeman' clickon={popup} text='PushMe'/> 
     ) 
    } 
} 

檢查工作代碼：https://codepen.io/anon/pen/MobvqB?editors=0010

檢查這個答案約細節什麼的{}含義：

What do curly braces mean in JSX (React)?