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

Question

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

根据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. 我应该在哪里放置逻辑以（例如）计算显示节点的大小或颜色？

预先感谢

Answer 1

几件事：

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