React v15.3.2和react-bootstrap v0.30.6 - <button>标签

Question

import React from 'react';
import render from 'react-dom';
import {Button, ButtonToolbar} from 'react-bootstrap';

export default class Chat extends React.Component {
    constructor(props) {
        super(props);
        this.localHandleClick = this.localHandleClick.bind(this);
    }

    localHandleClick() {
        console.log(this.props.increment);
        // this.props.localHandleClick(this.props.increment);
    }

    render() {
        return (
            <div>
                <h1>It Works!</h1>
                <p>This React project just works including
                    <span >module</span>
                </p>
                <p>Global bootstrap css import works too as you can see on the following button.</p>
                <div>
                    <ButtonToolbar>
                        <Button increment={1} bsStyle="primary" onClick={this.localHandleClick}>1</Button>
                        <Button increment={5} bsStyle="primary" onClick={this.localHandleClick}>5</Button>
                        <Button increment={10} bsStyle="primary" onClick={this.localHandleClick}>10</Button>
                        <Button increment={100} bsStyle="primary" onClick={this.localHandleClick}>100</Button>
                    </ButtonToolbar>
                    <br/>
                </div>
            </div>
        );
    }
}

我有一个这样的代码段，{Button}从react-bootstrap导入 现在我收到以下错误 -

我浏览了这个网址 -

https://gist.github.com/jimfb/d99e0678e9da715ccf6454961ef04d1b

但是我无法理解如何在我的代码中实现它。至少关于我上面提到的组件。我对React开发很新。

Answer 1

react-bootstrap <Button />组件只是常规<button />元素的包装器。他们所做的是传播所有传递到<button />元素的道具。由于增量不是<button />的HTML属性，因此会发出警告。

你可以这样解决问题：

<Button bsStyle="primary" onClick={this.localHandleClick.bind(this, 1)}>1</Button>
<Button bsStyle="primary" onClick={this.localHandleClick.bind(this, 5)}>5</Button>
<Button bsStyle="primary" onClick={this.localHandleClick.bind(this, 10)}>10</Button>
<Button bsStyle="primary" onClick={this.localHandleClick.bind(this, 100)}>100</Button>

将取消警告并将增量值绑定到函数本身。

另一种选择是创建一个<Incrementer />组件，它将增量作为prop并具有自己的按钮组件和onClick函数，它只使用<Incrementer />组件获得的prop来获取其标签，值。

这里的第二个示例是用于说明目的的基本编解码器http://codepen.io/finalfreq/pen/BQNEBL

Answer 2

React-bootstrap按钮组件似乎没有增量道具。该组件可能将这些道具传递给底层的html元素。所以反应会警告你不可理解的道具。

但它不会阻止你运行应用程序，因为它只是一个警告