javascript - 在 React 中创建更多元素

标签 javascript reactjs redux reactive-programming createelement

我需要在函数中传递超过 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"
       }
...
}

video tutorial babel-node | more about jsx

关于javascript - 在 React 中创建更多元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37989502/

相关文章:

react-native - 哪个库更适合离线支持 : redux-offline or react-native-offline?

reactjs - 使用redux、反模式时在react叶组件中设置this.state?优点/缺点

reactjs - 在使用 Redux 和 redux-thunk 的 React 应用程序中处理加载状态,在获取数据一次后返回到组件

javascript - 避免在默认值中分配虚假值的陷阱?

javascript - 未捕获的范围错误 : Maximum call stack size exceeded (jquery-1. 12.4)

reactjs - react 三纤维锁定 Canvas 中的对象位置

javascript - React Native 组件样式的最佳实践

javascript - 将 SVG 转换为 PNG,并将应用图像作为 svg 元素的背景

javascript - 如何在 JavaScript 中更新对象的属性?

javascript - 如何通过react在express上向mailchimp发送post请求