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>
    );
}