React.js:定义自定义属性

时间:2014-04-04 02:27:07

标签: javascript composition reactjs

React has a few custom defined attributes。我该如何定义自己的?

为什么?

我有一个Arc组件,下面是一些使用示例:

<Arc startAngle="90" endAngle="270" stroke="hsl(38, 100%, 50%)" strokeWidth="0.5" />
<Arc startAngle="45" endAngle="90" fill="hsla(38, 100%, 50%, 0.2)" />
<Arc startAngle="0" endAngle="45" className="pie-slice" />

startAngleendAngle属性是必需的。所有其他道具都是DOM属性,我只是&#34;代理&#34;到根节点。

var Arc = React.createClass({
    render: function() {
        return <path d={this.calcPath()}
            stroke={this.props.stroke}
            strokeWidth={this.props.strokeWidth}
            fill={this.props.fill}
            className={this.props.className}
        />
    },
    calcPath() {
        // ...
    }
});

我对每个属性的样板代码都不满意。我想复制除startAngleendAngle之外的所有传递的属性。

我提出了以下API:

var Arc = React.createClass({
    PROPS: {startAngle: true, endAngle: true},
    render: function() {
        return <path d={this.calcPath()} copyProps={cloneShallow(this.props, this.PROPS)}/>
    }
});

function cloneShallow(obj, exclude) {
    var result = {};
    var keys = Object.keys(obj);
    for (var i = 0; i < keys.length; i++) {
        var key = keys[i];
        if (!exclude.hasOwnProperty(key)) {
            result[key] = obj[key];
        }
    }
    return result;
}

我想定义copyProps属性。


XSLT允许隧道属性:

<path d={...}>
  <xsl:copy-of select="@*" />
</path>

我想要一些类似的React.js。

2 个答案:

答案 0 :(得分:3)

您可以使用this.transferPropsTo

return this.transferPropsTo(<path .../>);

如果您想省略某些道具,可以明确将它们设置为null,例如

<path startAngle={null} />

但是如果转移道具的组件无论如何都没有这样的道具,那么就没有必要这样做。

有关详细信息,请参阅documentation

答案 1 :(得分:1)

启动React v0.12,transferPropsTo are replaced by JSX Spread Attributes

return <path {...this.props}/>