Question

我有一个 MySVG 反应组件，其中包含另一个名为 svgbox 的组合组件。我看不到svgbox渲染。如果我使用svg直接在MySVG中绘制矩形（当前在svgbox中），它就可以工作。

我必须做出哪些改变才能使合成的 svgbox 发挥作用？

mysvg.js：

import React from 'react'
import svgBox from 'svgbox'

export default class MySVG extends React.Component {
    constructor () {
        super();
    }

    render() {
        return (
            <div className="row"> 
                <div className="col-md-12">
                    <svg width="700" height="500">
                        <svgBox/>
                    </svg>
                </div>
            </div>
        );
    }
}

svgbox.js

import React from 'react'

export default class svgBox extends React.Component {
    constructor () {
        super();
    }

    render() {
        return (
            <g transform="translate(50, 20)"> 
                <rect width="100" height="200" styles="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
            </g>
        );
    }
}

Answer 1

我在这里看到3个可能的问题。您必须将组件大写。在导入时使用./。在结束/＆gt;。之前使用空格。

    import React from 'react'
    //import svgBox from 'svgbox'
    import SvgBox from './svgbox'

    export default class MySVG extends React.Component {
            constructor () {
                    super();
            }

            render() {
                    return (
                            <div className="row"> 
                                    <div className="col-md-12">
                                            <svg width="700" height="500">
                                                    //<svgBox/>
                                                    <SvgBox />
                                            </svg>
                                    </div>
                            </div>
                    );
            }
    }

Answer 2

您的组件是否已正确导出/导入？

组合的组件在ReactJS中不起作用

2 个答案: