React v15.3.2 和 react-bootstrap v0.30.6 -- <button> 标签上的未知道具“increment”

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 导入的现在我收到以下错误 -

我经历了这个 url --

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 Button 组件似乎没有 increment 属性。该组件可能会将此类道具传递给基础 html 元素。所以 React 是在警告你不可理解的 prop。

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

React v15.3.2 和 react-bootstrap v0.30.6 -- <button> 标签上的未知道具“increment”

React v15.3.2 and react-bootstrap v0.30.6 -- Unknown prop `increment` on <button> tag

reactjs

react-bootstrap