在 className react.js 中調用 function

Question

如何在這個示例中為className的getClass調用 function？ 我寫出來的方式似乎沒有調用getClass 。

var CreateList = React.createClass({
    getClass: function() {
        //some code to return className
    },
    render: function() {
        return(
            <div className{this.getClass}>Example</div>
        );
    }
});

Answer 1

您正在引用getClass()函數的實例，而不是調用該函數。 嘗試調整它如下：

render: function() {
    return(
        <div className={this.getClass()}>Example</div>
    );
}

Answer 2

className{this.getClass}將無法編譯。 嘗試這個：

var CreateList = React.createClass({
    getClass: function() {
        //some code to return className
    },
    render: function() {
        return(
            <div className={this.getClass()}>Example</div>
        );
    }
});

如果您希望div具有以“className”開頭的類名，則將該字符串添加到調用的結果中： className={'className' + this.getClass()} 。

Answer 3

功能組件

const statusColor = () => {
    return 'red';
  };

<span className={statusColor()}>your text</span>