避免在 HTML 元素上重复，React

Question

我的 React 项目中有以下（简化）HTML：

    const { title } = this.props;

    if(title) {
        return (
            <div class="someClass" onClick={someFunction} title={title}>
                //Whatever..
            </div>
        )
    }
    else {
        return (
            <div class="someClass" onClick={someFunction}>
                //Whatever..
            </div>
        )
    }

请注意，if 和 else return 值除了 title 属性外是相同的。

我的问题是，如何防止这种重复，但只在需要时添加 title。

我知道我可以为每个元素添加标题，如果不需要则将其留空，但我不希望标题属性遍及我的 HTML 除非它们确实在做某事。

我试过：

var element = (
        <div class="someClass" onClick={someFunction} title={title}>
            //Whatever..
        </div>
    )

    if(title)
        element.title = //Whatever

但这没有用。

我也试过了

element.setAttribute('title', title);

但这也没有用。

以上两种尝试都导致页面崩溃。

有什么想法吗？一定可以做到....

Answer 1

在 React world 和 JSX 中，您应该使用 className 而不是 class。HTML 在 React 看起来像 HTML 的语法称为 JSX，它只是一个 syntactic sugar.
当您的代码命中 return statement 之后的所有内容将永远不会 executed.So 而不是：

如果（条件）{ return ... } 别的{ return ... }

能做到：

if(condition){
    return (<div>...</div>);
 }
 return (<div>...</div>)

所以你不需要 else

停止像 Vanilla Javascript 中那样手动 DOM manipulation，通过 element.setAttribute('title', title); 在 React 中不需要它。请花点时间学习 React basics.

Answer 2

您可以使用：

title = {title?title:null}

如果您的 props 中有标题，这将向元素添加具有指定值的属性 title，否则不会添加 title 属性。

避免在 HTML 元素上重复，React

Avoid repetition on HTML element, React

html

javascript

element