Как сопоставить метод DispatchToProps со свойством onClick для вложенных классов реакции?

Question

У меня есть класс реагирования "Свойство", который имеет некоторое имя и значение в своем редуксном состоянии. Значением одного «свойства» может быть другое «свойство» с именем и значением. Это зависит от пользователя, какой уровень вложенности он хочет. Итак, я назвал класс 'Property' из того же класса 'Property'. И сопоставили свойство OnClick одного из его propertyKey с методом mapDispatchToProps для некоторой обработки.

const mapDispatchToProps = dispatch =>{
return{
    onPropertyClicked : (propertyKey)=> dispatch({type: 'ChangeSelectedObject', propertyKey:propertyKey})
}};

Это оператор OnClick:

<span onClick = {()=>this.props.onPropertyClicked(this.props.propertyKey)}>{this.props.propertyKey}</span>

После того, как мы добавили данные во «Второй уровень» свойства «Property» и, если мы попытаемся нажать на его «ключ» (который имеет свойство OnClick), выдается следующая ошибка:

_this2.props.onPropertyClicked не является функцией

Кажется, невозможно сопоставить свойство click с методом отправки. Он отлично работает на первом уровне и позволяет добавлять столько, сколько вам нужно. Но терпит неудачу на втором вложенном уровне.

РЕДАКТИРОВАТЬ: Добавление класса недвижимости

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Property extends Component{
    constructor(props){
        super(props);
        this.state = {
            property:{
              key:"",
              value:null
            },
            key:this.props.propertyKey
        }
    }
    render(){
        let dummyProperties={...this.props.property};
        for(var objectKey in dummyProperties ){
            console.log(objectKey);
            console.log(dummyProperties[objectKey]);
        }
        return(
            
        <div>
            {
               (dummyProperties[this.props.propertyKey]["type"]==='property')?
               <div>
                   <p>
                        <span>{this.props.propertyKey}</span>:
                        <span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]}     </span>
                        <span><b>value : </b> {dummyProperties[this.props.propertyKey]["value"]}</span>
                   </p>
               </div>:
               <div>
                   <p>
                        <span onClick = {()=>this.props.onPropertyClicked(this.props.propertyKey)}>{this.props.propertyKey}</span>:
                        <span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]}     </span>
                        <span><b>value : </b></span>
                   </p>
                   <div>
                       {
                           (dummyProperties[this.props.propertyKey]["value"]!==undefined)?
                           <div>
                                <ul>
                                    {dummyProperties[this.props.propertyKey]["value"].map(property => {
                                        let out = Object.keys(property).map(propKey => [propKey]);
                                        return <li key={out[0]}>
                                                    <Property property={property} propertyKey={out[0]}/>
                                            </li> 
										})}
								</ul>
                           </div>:
                           null
                       }
                   </div>
                   
               </div>
            }
        </div>
        )
    };
}
const mapDispatchToProps = dispatch =>{
    return{
        onPropertyClicked : (propertyKey)=> dispatch({type: 'ChangeSelectedObject', propertyKey:propertyKey})
    }
};
export default connect(null, mapDispatchToProps)(Property);

Как мне сделать эту работу? Нужно ли что-то делать при работе с таким вложением ???

Answer 1

Отредактировано: Для тех, кто спотыкается об одной и той же проблеме, вот как я решил это:

Class Property extends React.Component
    {</p>

<pre><code>     //some code

    render(){
       return(

           <PropertyWrapper id="{someData}"/> // recursively calling same class (change1)

           //some code

            )
       }

    }

var PropertyWrapper = connect(mapStateToProps)(Property); // (change2)
export default PropertyWrapper
</code>

При экспорте класса, не просто экспортируйте как есть. Вместо этого оберните его в некоторую переменную и экспортируйте переменную. И вызвать обертку как рекурсивный класс.

Answer 2

Я просто поделюсь с вами быстрым примером. В следующем фрагменте у меня есть функция обратного вызова для ключа 'authuser'. Я буду использовать эту клавишу всякий раз, когда мне нужно будет отправить функцию.

 import authUser from 'path';

 const mapDispatchToProps = dispatch => {
  return {
    authUser: (usr, password) => dispatch(authUser(usr, password)),
  }
}