容器中的React组件和演示组件的适当分离

时间:2018-11-30 18:24:30

标签: reactjs react-redux

我正在尝试分离标题中提到的组件。

根据redux教程进行反应,这是拆分组件的最佳实践。

直到现在我具有以下组件:

ReduxTestNetwork

import React, {Component} from 'react';
import {Edge, Network, Node} from '@lifeomic/react-vis-network';
import { connect } from "react-redux";
import MyNetwork from "./MyNetwork";

...

const mapStateToProps = state => {
    return { nodes: state.nodes,edges: state.edges };
};
const VisNetwork = ({nodes,edges}) => (
    <MyNetwork nodes={nodes} edges={edges} options={options}/>
);
const ReduxTestNetwork = connect(mapStateToProps)(VisNetwork);
export default ReduxTestNetwork;

MyNetwork

import React, {Component} from 'react';
import {Edge, Network, Node} from '@lifeomic/react-vis-network';
import connect from "react-redux/es/connect/connect";
import {addNode} from "../actions";

const mapDispatchToProps = dispatch => {
    return {
        addNode: node => dispatch(addNode(node))
    };
};

class MyNetwork extends Component {
    constructor(props) {
        super(props);
        this.state = {nodes: props.nodes, edges: props.edges, options:props.options};
    }
    componentDidMount() {
        console.log('I just mounted')
        //this.onClick();
    }

    onClick(e){
        console.log(e)
        console.log(this)
       /* this.props.addNode({id:5,label:'Node 5'});

        this.setState(prevState => ({
            nodes: [...prevState.nodes, {id:5,label:'Node 5'}]
        }));*/
    }
    render() {
        const nodes = this.state.nodes.map(node => (
            <Node key={node.id} {...node}/>
        ));
        const edges = this.state.edges.map(edge => (
            <Edge key={edge.id} {...edge}/>
        ));
        return (
            <div id='network'>
                <Network options={this.state.options}   ref={(reduxTestNetwork) => {
                    window.reduxTestNetwork = reduxTestNetwork
                }} onSelectNode={this.onClick.bind(this)}>
                    {nodes}
                    {edges}
                </Network>
            </div>);
    }
}
const SVNetwork = connect(null, mapDispatchToProps)(MyNetwork);
export default SVNetwork;

我将ReduxTestNetwork连接到商店以获取道具状态和MyNetwork以便进行分发。

我读到表示性组件应仅用于显示元素,而容器组件应包括显示方式和内容的逻辑。但是我在MyNetwork中还需要一些逻辑来与使用第3方库的网络组件进行交互。

所以我的问题是:

  1. 我的分隔符正确吗?
  2. 我应该在哪里放置逻辑以(例如)计算显示节点的大小或颜色?

预先感谢

1 个答案:

答案 0 :(得分:0)

几件事:

  1. 您不需要使用connect两次。在容器上同时传递mapStateToProps和mapDispatchToProps。
  2. 如果您想遵循纯呈现组件的方法,请考虑使用副作用库:折射,sagas,thunk ...它们具有在组件外部处理您的逻辑的模式。
  3. 如果您更喜欢手工制作的方法,则可以将所需的每种方法移至容器,并仅通过props传递数据和函数引用以将其传递给组件。