React - 如何动态创建属性

Question

我有2个属性连接到2个道具：aria-hidden和aria-label 当aria-hidden为真时，它只显示一个。如果为假，则仅显示aria-label。

我写了这段代码，但它并不干......我怎样才能改进它？

 render() {
     let svgMarkup = '';

        if (this.props.hidden) {
            svgMarkup = (
                <svg role="img" aria-hidden="true">
                    ...
                </svg>
            );
        } else {
            svgMarkup = (
                <svg role="img" aria-label={ this.props.label }>
                    ...
                </svg>
            );
        }

        return svgMarkup;
 }

Answer 1

您可以在普通对象上设置道具，然后使用扩展语法将道具应用于您的反应组件：

render() {
    const ariaProps = this.props.hidden ?
        { 'aria-hidden': 'true' }
        :
        { 'aria-label': this.props.label };

    return (
        <svg role="img" {...ariaProps}>
            ...
        </svg>
    );
}