javascript - 如何使用 React 和 Redux 将调度映射到递归嵌套组件中的道具?
问题描述
我正在尝试制作一个应用程序,使用 Redux 向 React 显示家族树。每个人都显示在一个盒子里,盒子里有通往他们父母的线。我想要一个功能,如果你点击一个人的“卡片”,你会看到一个显示更多传记信息的弹出窗口。我遇到的麻烦是将调度操作映射到树下比根级别人员更远的任何组件中。当我点击顶部的“约翰”时,它按预期工作,但是他的任何祖先都坏了。希望我只是遗漏了一些明显的东西!
以下是组件:
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);
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;
解决方案
实际上,你并不了解 ReactJS 的基本原理,你从未将selectPerson
函数传递给Person
组件,请注意这部分代码:
<Person key={rootPerson.id} info={rootPerson}/>
您应该将 传递selectPerson
给这一行。否则,你在组件undefined
内部得到它Person
<Person key={rootPerson.id} info={rootPerson} selectPersion={() => {}} />
现在selectPerson
声明了,你noOp
在组件中得到了一个函数,Person
而不是得到undefined
. 这是您的问题的原因。
推荐阅读
- sql - 为什么 JSON 导入表会显示所有空值?
- mysql - 过滤从查询参数传递的数组。NestJS,TypeORM
- javascript - Discord.js 机器人循环使用 || 或运算符
- deep-learning - Pytorch CNN NotImplementedError
- python - 如何正确解析这个unix时间?
- html - 如何在不修改 HTML 的情况下直接将 SVG 添加到我的 CSS 文件中?
- c# - 在 IIS 应用程序池回收或从 localhost 运行网站之前找不到 ASP.NET Core 3.1 MVC 下载文件
- vim - 如何将用户命令添加到 vi/vim 以具有多个条件来搜索内容?
- javascript - 将列表对象转换为数组
- python - 如何删除 tkinter GUI 中的所有元素?