Question

使用以下示例中显示的元素创建带箭头的行（不是我的代码）： http://jsfiddle.net/m1erickson/9aCsJ/

我尝试将其转换为React组件，如下所示： http://jsfiddle.net/kdgqmt55/3/

但我看到的只是一条红线而没有箭头。

这是因为React运行时无法识别标记或defs元素吗？

（满足Stackoverflow的JSFiddle条件的代码：

  space = " "*5
    for i in range(7):
        print (i+1, *Pizza[i], sep=space,end=space)
        print (sales_of_day[i])

）

Answer 1

使用React渲染SVG元素是一个不幸的方面。它们将一堆属性列入白名单，列表中没有的属性被删除，因此您丢失了一堆markerWidth，markerHeight和许多其他属性。

https://facebook.github.io/react/docs/tags-and-attributes.html

有关于在https://github.com/facebook/react/issues/140

修复此问题的讨论

目前，对于未定义的属性，您可以将它们放在componentDidMount中。（添加了一对来演示，但没有完全修复该示例）

var Arrow = React.createClass({
       componentDidMount: function(){
           var markerNode = React.findDOMNode(this.refs.marker)
           var markerEndNode = React.findDOMNode(this.refs.markerEndNode)

           markerNode.setAttribute('markerWidth', 13)
           markerNode.setAttribute('markerHeight', 13)
           markerNode.setAttribute('refx', 2)
           markerNode.setAttribute('refy', 6)
       },
       render: function() {
            var style = {
                position: "absolute",
                zIndex: 200,
            };

            path_d = "M" + this.props.start.x + "," + this.props.start.y + " "
            path_d += "L" + this.props.stop.x + "," + this.props.stop.y

            return (
                <svg width="300" height="100" style={style} >
                    <defs>
                        <marker ref="marker" id="arrow">
                        <path d="M2,1 L2,10 L10,6 L2,2" style={{fill:"red"}} />
                        </marker>
                    </defs>

                <path ref="markerEndNode" d="M30,150 L100,50"
                    style={{stroke:"red", strokeWidth: "1.25px", fill: "none"}}
                />
            </svg>);
        },
    });

在React中创建带箭头的行

1 个答案: