在 React 中创建更多元素

Question

我需要在我的函数中传递超过 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', {})

Answer 1

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"
       }
...
}

video tutorial babel-node | more about jsx