React 创建组件使用组件 2

组件：

通过组件，可以将UI拆分成独立的，可重复使用的部分，从概念上讲，组件就像javaScript函数，它们接受任意输入（称之为道具），并返回描述屏幕上应显示内容的Recat元素。

1.定义一个简单的组件并且使用组件(注意：组件名称第一个字母必须大写)

function Demo(user){
    return <div>
               <h1>hello,{user.name};</h1>
               <h2>请问你是{user.age}岁吗？</h2>
           </div>;
}
const _demo =<Demo name='Jay' age='16' />;
ReactDOM.render(
    _demo,
    document.getElementById('root')
)

代码运行效果图：

2.组件内镶入组件

function Detail(article){
    return <h3>文章详情：{article.name}, {article.detail}</h3>;
}
function Title(article){
    return <h1>文章标题：{article.title}</h1>;
}
function Block(){
    return (
      <div>
        <Title title='今天早上你吃了什么？'/>
        <Detail name='张三' detail='我吃了一个苹果。'/>
        <Detail name='李四' detail='我吃了一个煎饼。'/>
      </div>
    );
}
ReactDOM.render(
    <Block/>,
    document.getElementById('root')
)

代码运行效果图：

代码说明：

第一次调用Detail（article）时

article === {name='张三',detail='我吃了一个苹果'} ，

第二次

调用Detail（article）时

article === {name='李四',detail='我吃了一个煎饼'} ；

由此可见，如 <Detail name='张三' detail='我吃了一个苹果。'/> 这样，其中的name属性，detail属性，其实都会集合在article对象里面，可以根据自己的需要自定义属性。调用的时候传递不同的参数就可以了。

3.社交媒体网站上的评论

function formatDate(date) {
  return date.toLocaleDateString();
}

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>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'http://placekitten.com/g/64/64',
  },
};
ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author}
  />,
  document.getElementById('root')
);

代码运行效果图：

这个示例代码虽然没有镶入自定义的组件，但是在数据引用上清晰明了，当然可以把里面的样式拆分成更小的自定义组件然后镶入调用，调用方法同示例2。

总结：

以上有3个示例，主要是学习组件的创建，使用，箱套，结合数据。可以复制下来在这里的html使用，可以直接看到运行效果。

React 创建组件 使用组件 2

组件：

总结：

猜你喜欢

React 创建组件使用组件 2