Question

这是我想要做的简化示例。我想要做的是通过道具将函数传递给React的不同组件。我可以将文本传递给道具，并通过<button onClick={popup}>直接调用函数，但这不是我实验的目的。 onClick没有触发该功能，并且没有被捕获＆＃39;渲染时console.log中的错误没有帮助。

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

将函数传递给reactjs中的子组件

1 个答案: