Question

超级新的反应，并试图做一些简单的d3练习反应但由于某种原因它没有呈现<rect/>标签。不确定我的map功能是否有问题。在任何地方都没有错误。

这是我的代码：

class Casing extends React.Component{

render(){

    let y = this.props.y;
    let wrid = this.props.wrid;
    let wellSection = this.props.wellSection;

    function casingPositionX(index){
        return (110 + (50 * index));
    }

    function casingPositionY(depthTvdFrom){        
        return y(depthTvdFrom);
    }

    function casingHeight(depthTvdFrom,depthTvdTo){
        return (y(depthTvdTo) - y(depthTvdFrom));
    }

    return(
        <g 
            className=""
            name={wrid ? "casing_" + wrid : ""}
        >

            {wrid &&
                wellSection.map(function(section,i){
                    <rect
                        name={"casing_section[" + (section.section) + "]"}
                        fill=""
                        width="2"
                        height={casingHeight(section.DepthTvdFrom, section.DepthTvdTo)}
                        transform={"translate(" + casingPositionX(i) + "," + casingPositionY(i) + ")"}
                    />

                })
            }
        </g>
    )
  }
}

Answer 1

Casing组件是否包含在<svg>元素中？尝试将<g>元素括在<svg>。

中

class Casing extends React.Component {

render() {
    let {y, wrid, wellSection} = this.props;

    function casingPositionX(index) {
        return (110 + (50 * index));
    }

    function casingPositionY(depthTvdFrom) {        
        return y(depthTvdFrom);
    }

    function casingHeight(depthTvdFrom,depthTvdTo) {
        return (y(depthTvdTo) - y(depthTvdFrom));
    }

    return(
        <div>
            <svg width="600" height="400">
            <g 
                className=""
                name={wrid ? "casing_" + wrid : ""}>
                {
                    wrid &&
                    wellSection.map(function(section,i) {
                        <rect
                            name={"casing_section[" + (section.section) + "]"}
                            fill=""
                            width="2"
                            height={casingHeight(section.DepthTvdFrom,                                     
                                section.DepthTvdTo)}
                            transform={"translate(" + casingPositionX(i) + "," + 
                                casingPositionY(i) + ")"}
                        />
                    })
                }
            </g>
            </svg>
        </div>
    )
}

Answer 2

很明显，在React中，如果要返回html元素，则需要将其放在.forEach()括号内，例如

return

d3 rect不在地图中渲染 - 反应

2 个答案: