6、React组件开发：属性、结构与JSX的应用

React组件开发：属性、结构与JSX的应用

1. React组件的多属性使用

在之前的示例中，我们创建的链接都指向同一个URL，这显然不符合实际需求。为了解决这个问题，我们引入了一个新的属性 url ，并在组件及其实例中使用它。以下是具体的代码实现：

class Link extends React.Component {
  render() {
    return React.createElement(
      'p',
      null,
      React.createElement(
        'a',
        { href: this.props.url },
        `Read more about ${this.props.framework}`,
      ),
    );
  }
}
const link1 = React.createElement(
  Link,
  { framework: 'React', url: '//reactjs.org' }
);
const link2 = React.createElement(
  Link,
  { framework: 'Vue', url: '//vuejs.org' }
);
const link3 = React.createElement(
  Link,
  { framework: 'Angular', url: '//angular.io' }
);
const group = React.createElement(React.Fragment, null, l