Question

我一直在试图弄清楚为什么我的容器不知道“这个”是什么。

如果我将容器更改为组件，则所有组件均可正常工作。

此组件可以完美运行并在到达商店时更改状态

    class testCard extends Component {


       test= (event) => {
           console.log("!!!!!!!!!!!!!!"); // Shows
           this.props.testAction(); // This works
       }

       render(){
       return (
       <Card>
           <CardActionArea onClick={this.test}>
               ... // Card stuff
           </CardActionArea>
           <CardActions>
       </Card>)
       }
   }


   const mapStateToProps = (state) => {
       return {

      }
   }

   const mapDispatchToProps = (dispatch) => {
       return bindActionCreators(
       {
            testAction:   testAction()
        }, dispatch)
   }
   export default connect(mapStateToProps, mapDispatchToProps) (testCard);

下面的代码不知道什么是“这”，并且会引发错误。

   const testCard = (props) => {

    let test= (event) => {
        console.log("!!!!!!!!!!!!!!"); // Shows
        this.props.testAction(); // This errors saying cannot find props of undefined
    }


    return (
    <Card>
        <CardActionArea onClick={test}>
            ... // Card stuff
        </CardActionArea>
        <CardActions>
    </Card>)
  }


  const mapStateToProps = (state) => {
     return {

     }
  }

  const mapDispatchToProps = (dispatch) => {
     return bindActionCreators({
         testAction:  testAction()
     }, dispatch)
   }
   export default connect(mapStateToProps, mapDispatchToProps) (testCard);

Answer 1

重要的是您必须知道什么是道具。大多数组件在创建时都可以使用不同的参数进行自定义。这些创建参数称为props。借助道具，我们可以在组件之间发送和接收数据。要获得足够的理解道具，请参阅反应教程井字游戏。

我希望这会对您有所帮助。

Answer 2

简而言之，您必须在第二个示例中调用props.testAction（）。它使用ES6箭头功能。 https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

此外，当您将箭头函数用于React组件时，您不需要render（）方法（当您使用基于类的组件（即扩展React.Component时，则需要实现它），则需要渲染），箭头功能是返回您的结果，即jsx数据。

https://medium.com/@yassimortensen/container-vs-presentational-components-in-react-8eea956e1cea

Answer 3

一些笔记。

   class testCard extends React.Component {

    test = (event) => {
        console.log("!!!!!!!!!!!!!!");
        this.props.testAction()
    }

    render(){
    return (
    <Card>
        <CardActionArea onClick={test}>
            ... // Card stuff
        </CardActionArea>
        <CardActions>
    </Card>)
    }
   }

  const mapStateToProps = (state) => {
     return {

     }
  }

  const mapDispatchToProps = (dispatch) => {
     return bindActionCreators({
         testAction:  testAction()
     }, dispatch)
   }
   export default connect(mapStateToProps, mapDispatchToProps) (testCard);

让您进一步了解为什么“ this”给您一个错误。这是因为“ this”始终指向最接近的对象。由于您未使用类组件（对象），因此默认情况下它指向全局窗口对象，该对象没有 props 属性。这就是为什么出现错误“找不到未定义的道具”的原因。您可以通过结合箭头功能的类组件来解决此问题。

如果您想使用传递给非类组件的道具，只需使用：

props.nameOfValuePassedDown()而不是this.props.nameofValuePassedDown()

Redux容器不知道“ this”是什么

3 个答案: