在节点单击上重新渲染反应组件

时间:2019-04-04 07:59:05

标签: reactjs

我有一个用于渲染2个组件的组件(一个是节点列表,另一个是到相应节点的数据) 第一次单击节点时,组件将被渲染,但是当我单击节点时,组件将不被渲染。

**

class DeviceTreeView extends Component {
    constructor(props){
        super(props);
        this.onSelect = this.onSelect.bind(this);
        this.state = {
            selectedNode: {},
            selectedID: 0
        }
    } 
    onSelect(node) {
        let {selectedNode} = this.state;
        if(_.isEmpty(selectedNode)){
            this.setState({selectedNode:node, selectedID: node.id }, () => {
                console.log("INSIDE IF: ",this.state.selectedID);
                console.log("OUTSIDE IF-ELSE: "+JSON.stringify(selectedNode));
            });
        } else {

            this.setState({selectedNode:node, selectedID: node.id }, () => {
                console.log("INSIDE ELSE AFTER NODE: ",this.state.selectedID);
                console.log("INSIDE ELSE: "+JSON.stringify(this.state.selectedNode));
            });
        }
    }
    render() {
        return (
        <div className="content">
            <DevicesHeader/>
            <div className="row">
                <div id ="devices-tree-left" className="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                    <Tree onSelect={this.onSelect} nodes={devices} displayCheckboxes={this.props.displayCheckboxes} toggleTreeCheckbox={this.toggleTreeCheckbox} selectedDeviceId={this.props.selectedDeviceId}/>
                </div>
                <div id ="devices-tree-right" className="col-xs-12 col-sm-12 col-md-9 col-lg-9">
                    { !_.isEmpty(this.state.selectedNode) &&  !_.isEmpty(this.state.selectedID) && this.state.selectedNode.type === 'device' && <DevicePage id={this.state.selectedID} />}
                </div>
            </div>
        </div>)
    }
}

**

0 个答案:

没有答案