javascript - reactjs - 如何在reactjs中的同一个div上使用多个独立的条件样式？

Question

我想知道如何在 react js 的同一个 div 上使用多个独立的条件样式。对于一种情况，我们可以使用三元运算符。但我想使用不同的独立条件。

例如:我有一个文本区域，我有三个按钮，分别是粗体、斜体和下划线。我想如果我点击任何按钮将完成他们各自的任务。

一切正常

<textarea
        onChange={this.handleChange}
        style={ this.state.bold ? {fontWeight: 'bolder'} : {fontStyle: 
        'normal'}}
        />

但这不是:

<textarea
        onChange={this.handleChange}
        style={ this.state.bold ? {fontWeight: 'bolder'} : {fontWeight: 
        'normal'}}
        style={ this.state.italic? {fontStyle: 'italic'} : {fontStyle: 
        'normal'}}
        />

reactjs中如何有多个独立的条件样式？

Answer 1

你可以这样做:

const handleStyleButton = (condition) => {
    if (condition) {
     return {
        backgroundColor: 'pink',
        height: 40,
        borderRadius: 10,
        border: 'none',
        margin: '.5em',
        minWidth: 60,
        cursor: 'pointer'
     }
    }
    return {
        backgroundColor: '#fff',
        height: 40,
        borderRadius: 10,
        border: 'none',
        margin: '.5em',
        minWidth: 60,
        cursor: 'pointer'
    }
};

用 html

<button style={handleStyleButton(true)} />