mirror of
https://github.com/bobwen-dev/react-templates
synced 2025-04-12 00:56:39 +02:00
add context parameter to stateless components (fixes #130)
This commit is contained in:
parent
042c73882f
commit
2a9bd2b4c9
@ -380,7 +380,7 @@ define([
|
|||||||
Since React v0.14, [React allows defining a component as a pure function of its props](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions).
|
Since React v0.14, [React allows defining a component as a pure function of its props](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions).
|
||||||
To enable creating a stateless component using react templates, add the `rt-stateless` attribute to the template's root element.
|
To enable creating a stateless component using react templates, add the `rt-stateless` attribute to the template's root element.
|
||||||
Using `rt-stateless` generates a stateless functional component instead of a render function.
|
Using `rt-stateless` generates a stateless functional component instead of a render function.
|
||||||
The resulting function receives a `props` parameter to be used in the template instead of `this.props`.
|
The resulting function receives `props` and `context` parameters to be used in the template instead of `this.props`.
|
||||||
|
|
||||||
###### Sample:
|
###### Sample:
|
||||||
```html
|
```html
|
||||||
@ -393,7 +393,7 @@ define([
|
|||||||
'lodash'
|
'lodash'
|
||||||
], function (React, _) {
|
], function (React, _) {
|
||||||
'use strict';
|
'use strict';
|
||||||
return function (props) {
|
return function (props, context) {
|
||||||
return React.createElement('div', {}, 'Hello ', props.person);
|
return React.createElement('div', {}, 'Hello ', props.person);
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
@ -35,10 +35,10 @@ _.forEach(reactSupportedAttributes, attributeReactName => {
|
|||||||
const htmlSelfClosingTags = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
|
const htmlSelfClosingTags = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
|
||||||
|
|
||||||
|
|
||||||
const templateAMDTemplate = _.template("define(<%= name ? '\"'+name + '\", ' : '' %>[<%= requirePaths %>], function (<%= requireNames %>) {\n'use strict';\n <%= injectedFunctions %>\nreturn function(<%= statelessProps %>){ return <%= body %>};\n});");
|
const templateAMDTemplate = _.template("define(<%= name ? '\"'+name + '\", ' : '' %>[<%= requirePaths %>], function (<%= requireNames %>) {\n'use strict';\n <%= injectedFunctions %>\nreturn function(<%= statelessParams %>){ return <%= body %>};\n});");
|
||||||
const templateCommonJSTemplate = _.template("'use strict';\n<%= vars %>\n\n<%= injectedFunctions %>\nmodule.exports = function(<%= statelessProps %>){ return <%= body %>};\n");
|
const templateCommonJSTemplate = _.template("'use strict';\n<%= vars %>\n\n<%= injectedFunctions %>\nmodule.exports = function(<%= statelessParams %>){ return <%= body %>};\n");
|
||||||
const templateES6Template = _.template('<%= vars %>\n\n<%= injectedFunctions %>\nexport default function(<%= statelessProps %>){ return <%= body %>}\n');
|
const templateES6Template = _.template('<%= vars %>\n\n<%= injectedFunctions %>\nexport default function(<%= statelessParams %>){ return <%= body %>}\n');
|
||||||
const templatePJSTemplate = _.template(`var <%= name %> = function (<%= statelessProps %>) {
|
const templatePJSTemplate = _.template(`var <%= name %> = function (<%= statelessParams %>) {
|
||||||
<%= injectedFunctions %>
|
<%= injectedFunctions %>
|
||||||
return <%= body %>
|
return <%= body %>
|
||||||
};
|
};
|
||||||
|
@ -576,7 +576,7 @@ function convertRT(html, reportContext, options) {
|
|||||||
requirePaths,
|
requirePaths,
|
||||||
vars,
|
vars,
|
||||||
name: options.name,
|
name: options.name,
|
||||||
statelessProps: context.stateless ? 'props' : ''
|
statelessParams: context.stateless ? 'props, context' : ''
|
||||||
};
|
};
|
||||||
let code = templates[options.modules](data);
|
let code = templates[options.modules](data);
|
||||||
if (options.modules !== 'typescript' && options.modules !== 'jsrt') {
|
if (options.modules !== 'typescript' && options.modules !== 'jsrt') {
|
||||||
|
@ -3,7 +3,7 @@ define([
|
|||||||
'lodash'
|
'lodash'
|
||||||
], function (React, _) {
|
], function (React, _) {
|
||||||
'use strict';
|
'use strict';
|
||||||
return function (props) {
|
return function (props, context) {
|
||||||
return React.createElement('div', {}, 'Hello ', props.person);
|
return React.createElement('div', {}, 'Hello ', props.person);
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user