Question

我有两个组件：Table（父级：Tables）和Connection（父级：Connections）。 Tables和Connections的父级是App。问题是Table需要在呈现Connection之前呈现。连接组件在两个Table组件之间创建一个连接（带有一条线），所以我所做的就是我读了Table组件的位置（使用jQuery）并创建了连接。但在呈现连接时，Table组件尚未呈现。

我该怎么办？有更好的方法吗？或者我可以定义依赖关系吗？

更新：

实际上它是两个Column组件之间的连接，但它们是Table组件的一部分，可以通过拖放移动。因此，该解决方案还应该提供更新/刷新连接的可能性。

示例编码：

Table组件

class Table extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        x: 0,
        y: 0
    };
    this.dragMoveListener = this.dragMoveListener.bind(this);
    this.componentDidMount = this.componentDidMount.bind(this);
}

componentDidMount(){
  // ...
}

dragMoveListener(event) {
  // will be called after with drag'n'drop, so there is a refresh neccessary
  this.setState({x: this.state.x + event.dx, y: this.state.y + event.dy });
}

style() {
  return {
    transform: 'translate(' + this.state.x + 'px, ' + this.state.y + 'px)'
  };
}

render() {

  var self = this;

  var ncolumns = this.props.table.columns.map(function(c,i) {
    return <Column key={i} tablename={self.props.table.name} column={c} tindex={self.props.index} cindex={i}></Column>;
  });

  return (<div style={this.style()} className="table draggable">
            <div id={this.props.table.name} className="entry table-name">{this.props.table.name}</div>
            {ncolumns}
         </div>);
}
}

Connection组件：

class Connection extends React.Component {
    constructor(props) {
        super(props);
    }

    style(thickness,length,cx,cy,angle) {
        return {
            padding: '0px',
            margin: '0px',
            height: thickness + 'px',
            backgroundColor: '#eee',
            lineHeight: '1px',
            position: 'absolute',
            left: cx + 'px',
            top: cy + 'px',
            width: length + 'px',
            transform: 'rotate(' + angle + 'deg)'
        }
    }
    render() {
            var a = $('#'+this.props.connection.table_a + '-' + this.props.connection.column_a);
            var b = $('#'+this.props.connection.table_b + '-' + this.props.connection.column_b);
            // some math to get length, angle between tables/columns etc.
        return(<div style={this.style(thickness,length,cx,cy,angle)} />);
    }
}

Answer 1

在<App>创建一个回调函数tablesDidRender()，它将调用setState({tablesDidRender: true})（在App中）。将该函数传递给<Tables>组件并在componentDidMount中调用它（在第一次渲染后调用的生命周期方法）。在<App>中，您现在可以根据<Connections>呈现this.state.tablesDidRender：

如果true：渲染<Connections>
如果false：不提供任何内容（null）

ReactJS：组件之间的关系（依赖关系）

1 个答案: