ECMAScript 6: Is it possible to redefine tag attributes in a class?

Question

I want to override some attributes of the result tag by default. For example, I have a link routing component. I want to inherit from it and override some attributes of the tag by default. How can I do it?

Now the code I wrote looks like this:

'use strict'; import React from 'react'; import {Link} from 'react-router'; import styles from './CommonStyles'; class MyLink extends Link { constructor(props) { super(props); // можно ли как-то здесь переопределить атрибуты результирующего тега? } render () { return super.render(); } } export default MyLink;

I want to get this result:

 'use strict'; import {Link} from 'react-router'; import styles from './CommonStyles'; <Link style={styles.title} to="/" activeStyle={styles.active}> <p>Это какой-то текст ссылки</p> </Link>

I myself am writing the second week in the reactor, but the idea itself seems to me to be somehow dumb.
Components should be minimal and simple, and if this is the case, it’s probably easier to rewrite the whole render than to call super.render () and build crutches.
That's about it: github.com/reactjs/react-router/blob/master/modules/Link.js It looks like something too complicated.
The ideal component from the point of view of react is an immutable.
Do you want to create your MyLink component, which is based on Link, while MyLink already includes the default styles that will be transmitted to Link?
In order for each use of MyLink not to transfer styles manually?

Razzwan 1,084 eight thirty · Accepted Answer · 2016-08-01T19:43:30

In my opinion, it will be much easier to reuse Link in the MyLink MyLink :

 import React from 'react'; import {Link} from 'react-router'; import styles from './CommonStyles'; function MyLink(props) { return ( <Link {...props} style={styles.title} activeStyle={styles.active} > {props.children} </Link> ); } export default MyLink;

A pure function is used, since except for the render from this component, nothing more is needed.

Attributes style and activeStyle are set to default values.

{...props} needed in order from the parent to pass additional attributes directly to Link , for example, such as "to" or any other attributes supported by the Link component.

{props.children} - insert MyLink child elements inside Link .

MyLink can use MyLink like this:

 <MyLink to="/"> <p>Это какой-то текст ссылки</p> </MyLink>

If you also want to supplement / override the default Link styles from the parent, this can be done through their extension:

 function MyLink(props) { return ( <Link {...props} style={Object.assign({}, styles.title, props.style)} activeStyle={Object.assign({}, styles.active, props.activeStyle)} > {props.children} </Link> ); }

And use:

 <MyLink to="/" style={{ color: 'red' }} activeStyle={{ color: 'blue' }} > <p>Это какой-то текст ссылки</p> </MyLink>

The styles will then be merged, not completely rewritten.

In ECMAScript 6 style, it looks like this:

 import React from 'react'; import {Link} from 'react-router'; import styles from './CommonStyles'; class MyLink extends React.Component { constructor(props) { super(props); } render() { return ( <Link {...this.props} style={styles.title} activeStyle={styles.active} > {this.props.children} </Link> ); } } export default MyLink;

And I do not understand how this is fundamentally different from the extension class Link?

ECMAScript 6: Is it possible to redefine tag attributes in a class?

1 answer 1

More articles: