React学习案例十一

Posted 2022-02-13 hhh江月

React学习案例十一

文章目录

• • React学习案例十一
  • • 一、代码实现
    • 二、总结

一、代码实现

<!-- class Welcome extends React.Component 
  render() 
    return <h1>Hello, this.props.name</h1>;
  
 -->

<!-- class类组件 -->
<!-- class Welcome 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>
  );
-->

二、总结

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