Question

我对reactjs很新，我正在寻找一种根据状态改变按钮颜色的简单方法。基本上我正在使用reactstrap，我有一个按钮，我希望它的颜色是“二级”，“危险”或“主要”Button标签的工作方式：

<Button color={String} />

我想使用一个函数将String放在那里。基本上这里是一个小功能：

buttonClassName(radioId) {
    if (this.state.whatevs.valid === false)
        return "danger";
    if (this.state.whatevs.value === radioId)
        return "primary";
    return "secondary;
}

这是我想要的方式：

<Button outline color={() => this.buttonClassName(1)}>blah blah1</Button>
<Button outline color={() => this.buttonClassName(2)}>blah blah2</Button>
<Button outline color={() => this.buttonClassName(3)}>blah blah3</Button>

等等更多按钮，问题是，在逻辑上反应咆哮，因为：

Warning: Failed prop type: Invalid prop `color` of type `function` supplied to `Button`, expected `string`.

我同意它，但是如何在不传递函数的情况下更改字符串，我是否必须从中获取状态，它看起来如此令人难以置信的环绕。当我只有两个州时，我可以这样做：

<Button outline color={(whatevs.valid === false)?"danger":"secondary"}>blah blah1</Button>

这也不是真正的字符串，但它有效。

Answer 1

你可以最明确地使用函数来返回一个字符串。您的实现问题是您通过引用传递整个函数而不是函数的结果。

请在下面进行简单的修复。这将执行该函数并将所需的字符串返回到<Button>组件。

<Button outline color={this.buttonClassName(1)}>blah blah1</Button>
<Button outline color={this.buttonClassName(2)}>blah blah2</Button>
<Button outline color={this.buttonClassName(3)}>blah blah3</Button>

如何将函数而不是字符串作为prop传递给组件

1 个答案: