Question

这是我的组件

class MyComponent  extends Component {
  render () {
    const { action } = this.props;
    action();
    return (<div>Done!</div>);
  }

MyComponent.propTypes = {
   action: PropTypes.func.isRequired
}

以下是容器的相关代码：

   doSomething () {  
     ...
   }
   render() {
      return (
        <MyComponent
         action={doSomething}
        />
      )
   }

当我在浏览器中显示此代码时，出现此错误消息：

Uncaught TypeError: Cannot read property 'toObject' of undefined

业务逻辑应该存在于容器中，因此我不想将action的代码复制并粘贴到MyComponent中。

所以我的问题是：如何通过render方法直接调用通过属性传递的函数？

Answer 1

我认为，问题出在这个地方：

doSomething () {  
     ...
}

render() {
   return (
     <MyComponent
        action={doSomething}  //here
     />
   )
}

应该是：

doSomething () {  
   ...
}

render() {
   return (
      <MyComponent
         action={this.doSomething}
      />
   )
}

您需要使用this.doSomething代替doSomething。

检查工作示例：

class App extends React.Component{

   constructor(){
      super();
   }
   
   doSomething(){
       console.log('called');
   }
   
   render(){
       return(
          <div>
             Hello
             <Child action={this.doSomething}/>
          </div>
       )
   }
}

var Child = (props) => {
   const {action} = props
   action();
   return(
     <div>Child</div>
   )
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

无法读取属性＆＃39; toObject＆＃39;尝试调用func属性时未定义

1 个答案: