Question

我正在尝试创建一个名为＆＃39; Connection＆＃39;这将链接两个位置＆＃39;通过＆＃39; Line＆＃39;成分

我似乎无法弄清楚如何从开始/结束位置获取X / Y坐标。

引用物体是我无法绕过的。

我目前的代码如下：

import React from 'react';
import { Layer, Stage } from 'react-konva';

import Location from './components/Location';
import Connection from './components/Connection';

// CSS
import './css/App.css';

class App extends React.Component {
  render() {
    return (
      <div className="App">
          <Stage width={1400} height={700}>
              <Layer>
                  <Location ref='L1' x={0}      y={0} />
                  <Connection ref="L1,L2" start={this.refs.L1} end={this.refs.L2} />
                  <Location ref='L2' x={250}    y={0} />
                  <Location ref='L3' x={500}    y={0} />
              </Layer>
          </Stage>
      </div>
    );
  }
}

export default App;

对不起，如果我这样做完全错了！我是React的新手。

编辑：连接

import React from 'react';

import { Line } from 'react-konva';

class Connection extends React.Component {
    constructor(props){
        super(props);
        console.log(JSON.stringify(props.start));
        this.state = {
            color: 'green'
        }
    }
    render() {
        return (
            <Line
                points={[
                    100, 50,
                    250, 50
                ]}
                stroke={this.state.color}
                strokeWidth={2}
                lineJoin='round'
                lineCap='round'
                dash={[17, 5]}
            />
        );
    }
}

export default Connection;

构造函数中的console.log(JSON.stringify(props.start));行返回undefined。

Answer 1

不要将SELECT ... LIMIT 50 FOR UPDATE;作为属性传递。在第一次渲染时refs未定义。所以子组件this.refs.L1在this.props中未定义。相反，您应该直接传递坐标：

Connection

反应组件参考

编辑：连接

1 个答案: