8、React中JSX的高级用法与技巧

java5

于 2025-10-21 16:13:52 发布

阅读量18

点赞数

CC 4.0 BY-SA版权

分类专栏： React快速入门精讲文章标签： JSX React 分支处理

本文链接：https://blog.csdn.net/java5/article/details/154553162

React快速入门精讲专栏收录该内容

26 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

React中JSX的高级用法与技巧

1. JSX中使用子节点的链接列表

在JSX里，我们可以构建带有子节点的链接列表。以下是示例代码：

import React, { Component } from 'react';

class Link extends Component {
  render() {
    return (
      <a href={this.props.url}>
        {this.props.children}
      </a>
    );
  }
}

class App extends Component {
  render() {
    return (
      <Fragment>
        <Link url="//reactjs.org">
          <strong>React</strong>
        </Link>
        <Link url="//vuejs.org">
          Vue
        </Link>
        <Link url="//angular.io">
          Angular
        </Link>
      </Fragment>
    );
  }
}

export default App;

使用属性和子节点的差异十分明显。我们本可以把链接内容作为属性传递，但那样会显得很糟