Target container is not a DOM element

逃离我推掉我的手 2022-01-28 16:21 153阅读 0赞

1、错误描述

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95b3VoYWlkb25nLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70][]

2、错误原因

import React, {Component} from 'react';
    import {render} from 'react-dom';
    import Button from 'react-bootstrap/Button'
    
    const ProPic = (props) => {
    	return (
    		<img src={'http://www.youhaidong.com/' + props.name + '/picture'}/>
    	);
    }
    
    const PicLink = (props) => {
    	return (
    		<a href={'http://www.youhaidong.com/' + props.name}>
    		  {props.name}
    		</a>
    	);
    }
    
    const ImgLink = (props) => {
    	return (
    		<div>
    			<ProPic name={props.name}/>
    			<PicLink name={props.name}/>
    		</div>
    	);
    }
    
    render(
    	<ImgLink name="张珊珊"/>
    );
    
    export default ImgLink;

由于ImgLink是一个组件，不能直接使用render()方法，需要在组件中使用render()方法

3、解决办法

import React, {Component} from 'react';
    import ReactDOM,{render} from 'react-dom';
    import Button from 'react-bootstrap/Button'
    
    const ProPic = (props) => {
    	return (
    		<img src={'http://www.youhaidong.com/' + props.name + '/picture'}/>
    	);
    }
    
    const PicLink = (props) => {
    	return (
    		<a href={'http://www.youhaidong.com/' + props.name}>
    		  {props.name}
    		</a>
    	);
    }
    
    const ImgLink = (props) => {
    	return (
    		<div>
    			<ProPic name={props.name}/>
    			<PicLink name={props.name}/>
    		</div>
    	);
    }
    
    class ImgLinks extends Component {
    	constructor(props){
    		super(props);
    		this.state = {name:'张珊珊'};
    	}
    	
    	render() {
    		return (
    			<ImgLink name={this.name}/>
    		);
    	}
    }
    
    export default ImgLinks;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95b3VoYWlkb25nLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20220128/63f5b30cc96a40c7842aca65670e186e.png