1、错误描述
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;