在 React 中创建更多元素
Create more Elements in React
我需要在我的函数中传递超过 1 个元素作为参数,这就是我只使用 1 个元素的方式
var first = require('./First’)
如何在此处传递更多元素作为参数?例如还有
var second = require(‘./Second’)
这里是代码示例
var fs = require('fs')
var React = require('react')
var ReactDOMServer = require('react-dom/server')
var First = require('./First')
var Second = require('./Second')
var build = function(name, props) {
var svg = ReactDOMServer.renderToStaticMarkup(React.createElement(First, props))
fs.writeFileSync('client/data/' + name + '.svg', svg)
}
build(‘my-icon', {})
ES5
var fs = require('fs');
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var Manna = require('./Manna');
var Cog = require('./Cog');
var build = function(name, props) {
var size = props.size || 64;
var svgProps={
xmlns:"http://www.w3.org/2000/svg",
viewBox:[0, 0, size, size].join(' '),
width:size,
height:size
};
var svg = ReactDOMServer.renderToStaticMarkup(
React.createElement("svg",svgProps,
React.createElement(Cog,props),
React.createElement(Manna,props))
);
fs.writeFileSync('client/data/' + name + '.svg', svg);
};
build('manna-icon', {});
ES6 JSX 和 BABEL
import fs from 'fs';
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import Manna from './Manna';
import Cog from './Manna';
const build = (name="defaultName", props)=> {
let size = props.size || 64;
let svgProps={
xmlns:"http://www.w3.org/2000/svg",
viewBox:`0 0 ${size} ${size}`,
width:size,
height:size
};
let svg = renderToStaticMarkup(
<svg {...svgProps}>
<Cog {...props}/>
<Manna {...props}/>
</svg>);
fs.writeFileSync(`client/data/${name}.svg`, svg);
};
build('manna-icon', {});
例如您需要的 jsx 和 es6 功能 babel-cli
npm install -D babel-cli nodemon
然后在 package.json
{...
"scripts":{
"start":"nodemon --exec babel-node server.js"
}
...
}
我需要在我的函数中传递超过 1 个元素作为参数,这就是我只使用 1 个元素的方式
var first = require('./First’)
如何在此处传递更多元素作为参数?例如还有
var second = require(‘./Second’)
这里是代码示例
var fs = require('fs')
var React = require('react')
var ReactDOMServer = require('react-dom/server')
var First = require('./First')
var Second = require('./Second')
var build = function(name, props) {
var svg = ReactDOMServer.renderToStaticMarkup(React.createElement(First, props))
fs.writeFileSync('client/data/' + name + '.svg', svg)
}
build(‘my-icon', {})
ES5
var fs = require('fs');
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var Manna = require('./Manna');
var Cog = require('./Cog');
var build = function(name, props) {
var size = props.size || 64;
var svgProps={
xmlns:"http://www.w3.org/2000/svg",
viewBox:[0, 0, size, size].join(' '),
width:size,
height:size
};
var svg = ReactDOMServer.renderToStaticMarkup(
React.createElement("svg",svgProps,
React.createElement(Cog,props),
React.createElement(Manna,props))
);
fs.writeFileSync('client/data/' + name + '.svg', svg);
};
build('manna-icon', {});
ES6 JSX 和 BABEL
import fs from 'fs';
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import Manna from './Manna';
import Cog from './Manna';
const build = (name="defaultName", props)=> {
let size = props.size || 64;
let svgProps={
xmlns:"http://www.w3.org/2000/svg",
viewBox:`0 0 ${size} ${size}`,
width:size,
height:size
};
let svg = renderToStaticMarkup(
<svg {...svgProps}>
<Cog {...props}/>
<Manna {...props}/>
</svg>);
fs.writeFileSync(`client/data/${name}.svg`, svg);
};
build('manna-icon', {});
例如您需要的 jsx 和 es6 功能 babel-cli
npm install -D babel-cli nodemon
然后在 package.json
{...
"scripts":{
"start":"nodemon --exec babel-node server.js"
}
...
}