React学习案例十一

React学习案例十一

文章目录

一、代码实现

<!--classWelcome extends React.Component {
  render(){return<h1>Hello,{this.props.name}</h1>;}}--><!--class类组件 --><!--classWelcome extends React.Component {
  render(){return<h1>Hello,{this.props.name}</h1>;}}--><!-- 举一个例子 --><!-- function Welcome(props){return<h1>Hello,{props.name}</h1>;}

const element =<Welcome name="Sara"/>;
ReactDOM.render(
  element,
  document.getElementById('root'));--><!-- function Welcome(props){return<h1>Hello,{props.name}</h1>;}

const element =<Welcome name="Hyx"/>;
ReactDOM.render(
  element,
  document.getElementById('root'));--><!-- 一个组合组件的例子 --><!-- function Welcome(props){return<h1>Hello,{props.name}</h1>;}

function App(){return(<div><Welcome name="Sara"/><Welcome name="Cahal"/><Welcome name="Edite"/></div>);}

ReactDOM.render(<App />,
  document.getElementById('root'));--><!-- 提取组件 --><!-- function Comment(props){return(<div className="Comment"><div className="UserInfo"><img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}/><div className="UserInfo-name">{props.author.name}</div></div><div className="Comment-text">{props.text}</div><div className="Comment-date">{formatDate(props.date)}</div></div>);}--><!-- function Welcome(props){return<h1>Hello,{props.name}</h1>;}

function App(){return(<div><Welcome name="Sara"/><Welcome name="Cahal"/><Welcome name="Edite"/></div>);}

ReactDOM.render(<App />,
  document.getElementById('root'));--><!-- function Comment(props){return(<div className="Comment"><div className="UserInfo"><img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}/><div className="UserInfo-name">{props.author.name}</div></div><div className="Comment-text">{props.text}</div><div className="Comment-date">{formatDate(props.date)}</div></div>);}--><!-- function Avatar(props){return(<img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}/>);}

function Comment(props){return(<div className="Comment"><div className="UserInfo"><Avatar user={props.author}/><div className="UserInfo-name">{props.author.name}</div></div><div className="Comment-text">{props.text}</div><div className="Comment-date">{formatDate(props.date)}</div></div>);}-->

二、总结

最后，谢谢大家的阅读与支持，谢谢大家。