Javascript 在React中创建带有箭头的线

使用元素创建带箭头的行，如下例所示（不是我的代码）：

我尝试将其转换为React组件，如下所示：

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

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

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

React.render(<Arrow start={{x:0, y:0}} stop={{x:400, y:400}} />,
                                       $("#my-arrow").get(0)
                                       );  

React.render（，
$（“#我的箭”）.get（0）
);  

---

)这是使用React呈现SVG元素的一个不幸方面。它们会将一组属性和不在列表中的属性列为白名单，因此您将丢失一组markerWidth、markerHeight和许多其他属性

这里有关于修复此问题的讨论

目前，对于未定义的属性，您可以将它们放在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（）{
变量样式={
位置：“绝对”，
zIndex:200，
};
path_d=“M”+this.props.start.x+，“+this.props.start.y+”
路径d+=“L”+此.props.stop.x+，“+此.props.stop.y”
返回(
);
},
});

这是使用React呈现SVG元素的一个不幸方面。它们会将一组属性和不在列表中的属性列为白名单，因此您将丢失一组markerWidth、markerHeight和许多其他属性

这里有关于修复此问题的讨论

目前，对于未定义的属性，您可以将它们放在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（）{
变量样式={
位置：“绝对”，
zIndex:200，
};
path_d=“M”+this.props.start.x+，“+this.props.start.y+”
路径d+=“L”+此.props.stop.x+，“+此.props.stop.y”
返回(
);
},
});

这是使用React呈现SVG元素的一个不幸方面。它们会将一组属性和不在列表中的属性列为白名单，因此您将丢失一组markerWidth、markerHeight和许多其他属性

这里有关于修复此问题的讨论

目前，对于未定义的属性，您可以将它们放在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（）{
变量样式={
位置：“绝对”，
zIndex:200，
};
path_d=“M”+this.props.start.x+，“+this.props.start.y+”
路径d+=“L”+此.props.stop.x+，“+此.props.stop.y”
返回(
);
},
});

这是使用React呈现SVG元素的一个不幸方面。它们会将一组属性和不在列表中的属性列为白名单，因此您将丢失一组markerWidth、markerHeight和许多其他属性

这里有关于修复此问题的讨论

目前，对于未定义的属性，您可以将它们放在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（）{
变量样式={
位置：“绝对”，
zIndex:200，
};
path_d=“M”+this.props.start.x+，“+this.props.start.y+”
路径d+=“L”+此.props.stop.x+，“+此.props.stop.y”
返回(
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>);
        },
    });