Javascript 如何使用React和Redux将分派映射到递归嵌套组件中的道具?
我正在尝试创建一个应用程序,该应用程序显示一个家族树,以便使用Redux进行响应。每个人都显示在一个框中,框中的行指向他们的父母。我想有一个功能,如果你点击一个人的“卡片”,你会看到一个弹出窗口,显示更多的个人简历信息。我遇到的麻烦是在树的任何组件中映射分派操作,而不是根级别的人员。当我点击顶部的“约翰”时,它就像预期的那样工作,但是他的任何祖先都会崩溃。希望,我只是错过了一些明显的东西 以下是组件:Javascript 如何使用React和Redux将分派映射到递归嵌套组件中的道具?,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,我正在尝试创建一个应用程序,该应用程序显示一个家族树,以便使用Redux进行响应。每个人都显示在一个框中,框中的行指向他们的父母。我想有一个功能,如果你点击一个人的“卡片”,你会看到一个弹出窗口,显示更多的个人简历信息。我遇到的麻烦是在树的任何组件中映射分派操作,而不是根级别的人员。当我点击顶部的“约翰”时,它就像预期的那样工作,但是他的任何祖先都会崩溃。希望,我只是错过了一些明显的东西 以下是组件: import React, {Component} from 'react'; impo
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {getFamily} from '../redux/family.actions'
import "./Family.css";
import Person from './Person';
class Family extends Component {
render() {
const {rootPerson} = this.props;
return (
<div className="family family-container">
<ul>
<Person key={rootPerson.id} info={rootPerson}/>
</ul>
</div>
)
}
}
const mapStateToProps = (state) => ({
rootPerson: state.family.allFamilyMembers[0]
});
const mapDispatchToProps = dispatch => ({
getFamilyFromStore: () => dispatch(getFamily())
});
export default connect(mapStateToProps, mapDispatchToProps)(Family);
实际上,您不知道ReactJS的基本原理,您从未将
selectPerson
函数传递给Person
组件,请注意代码的这一部分:
您应该将selectPerson
传递到此行。否则,在Person
组件中,您将其作为undefined
{}/>
现在声明了
selectPerson
,您在Person
组件中得到了noOp
函数,而不是未定义的。这就是问题的原因。您是否尝试过此方法:{props.info.parents.map(child=>)}
这解决了我的问题!谢谢:-)
import React from 'react';
import {connect} from 'react-redux';
import {selectPerson} from '../redux/family.actions'
import "./Person.css";
const Person = props => (
<li className="oc-hierarchy" onClick={() => props.selectPerson(props.info)}>
<div className="card card-body oc-node">
<h1>{props.info.name}</h1>
</div>
{props.info && props.info.parents && props.info.parents.length > 0 && (
<ul>
{props.info.parents.map(child => (
<Person info={child} />
))}
</ul>
)}
</li>
);
const mapDispatchToProps = dispatch => ({
selectPerson: (person) => dispatch(selectPerson(person))
});
export default connect(null, mapDispatchToProps)(Person);
import React from 'react';
import {connect} from 'react-redux';
import './App.css';
import Family from './components/Family';
import PersonBio from './components/PersonBio';
function App({selectedPerson}) {
return (
<div className="App">
<Family />
{selectedPerson == null ? null : <PersonBio />}
</div>
);
}
const mapStateToProps = (state) => ({
selectedPerson: state.family.selectedPerson
});
export default connect(mapStateToProps) (App);
export const selectPerson = (person) => ({
type: 'SELECT_PERSON',
payload: person
})
const INITIAL_STATE = {
allFamilyMembers: [
{
id:0,
name: 'John',
parents: [
{
id:1,
name: 'Bill',
parents: [
{
id:3,
name: 'Bob',
parents: [
]
},
{
id:4,
name: 'Barb',
parents: [
]
},
]
},
{
id:2,
name: 'Mary',
parents: [
{
id:5,
name: 'Matt',
parents: [
{
id:7,
name: 'Mark',
parents: [
]
},
{
id:8,
name: 'Ruth',
parents: [
]
},
]
},
{
id:6,
name: 'Marge',
parents: [
]
},
]
}
]
}
],
selectedPerson: null
}
const familyReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case 'GET_FAMILY':
return state;
case 'SELECT_PERSON':
return {
...state,
selectedPerson: action.payload
};
default:
return state;
}
}
export default familyReducer;