Javascript Redux容器不知道什么；这"；是

我一直在试图弄明白为什么我的容器不知道“this”是什么

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

此组件工作正常，在到达存储时会更改状态

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

类测试卡扩展组件{
测试=（事件）=>{
console.log（“！！！！！！！！！！！！！”）；//显示
this.props.testAction（）；//这很有效
}
render（）{
返回(
…//卡片之类的东西
)
}
}
常量mapStateToProps=（状态）=>{
返回{
}
}
const mapDispatchToProps=（调度）=>{
返回bindActionCreators(
{
testAction:testAction（）
}，调度）
}
导出默认连接（mapStateToProps、mapDispatchToProps）（测试卡）；

下面的代码不知道什么是“this”，将抛出一个错误

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

const测试卡=（道具）=>{
让测试=（事件）=>{
console.log（“！！！！！！！！！！！！！”）；//显示
this.props.testAction（）；//此错误说明找不到未定义的道具
}
返回(
…//卡片之类的东西
)
}
常量mapStateToProps=（状态）=>{
返回{
}
}
const mapDispatchToProps=（调度）=>{
返回bindActionCreators({
testAction:testAction（）
}，调度）
}
导出默认连接（mapStateToProps、mapDispatchToProps）（测试卡）；

简而言之，在第二个示例中，您必须调用props.testAction（）。 它使用ES6箭头功能。

另外，当您对react组件使用箭头函数时，您不需要render（）方法（当您使用基于类的组件（即扩展react.component）时需要render，然后您需要实现它），箭头函数中所需的只是返回结果，即jsx数据

几个注释

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

类测试卡扩展了React.Component{
测试=（事件）=>{
控制台日志（“！！！！！！！！！！！！！”）；
this.props.testAction（）
}
render（）{
返回(
…//卡片之类的东西
)
}
}
常量mapStateToProps=（状态）=>{
返回{
}
}
const mapDispatchToProps=（调度）=>{
返回bindActionCreators({
testAction:testAction（）
}，调度）
}
导出默认连接（mapStateToProps、mapDispatchToProps）（测试卡）；

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

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

---

props.nameOfValuePassedDown（）

而不是

this.props.nameOfValuePassedDown（）

知道什么是道具很重要。 大多数组件在创建时都可以使用不同的参数进行自定义。这些创建参数称为props。 借助props，我们可以在组件之间发送和接收数据。 对于足够的了解道具，请参阅反应教程Tic-Tac-Toe游戏

---

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

第二个示例应该是功能组件吗？它一开始看起来像一个，但后来说

render（）{

，我认为这是一个语法错误。如果它是一个功能组件，那么就没有

this

。只需访问

props.testAction

，而不是

this.props.testAction

就没有“实例”函数组件，因此此

render（）{…}

在第二个示例中看起来像是语法错误，代码甚至不应该运行。是的，抱歉删除了渲染。这是在two@bulb，如果您有任何问题，请告诉我。“这个”这通常是一个非常困难的概念。“当你使用箭头函数作为反应组件时……”这同样适用于所有的功能组件，无论它们是如何定义的。太棒了，我错过了我需要的道具。动作。现在当我将它改成这个时，它就起作用了。谢谢。