我需要在函数中传递超过 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"
}
...
}
关于javascript - 在 React 中创建更多元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37989502/