Question

我想在项目中使用react-bootstrap的Collapse，但是它需要react-hooks中的useState，这是在react版本16.8中引入的。但是，该项目仍在React 15.3版上，并且不能进行更新。

有人可以建议如何使用react 15.3来实现此react-bootstrap示例吗？

{
  "name": "hello-react-bootstrap",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.18",
    "@types/node": "12.7.2",
    "@types/react": "^15.0.8",
    "@types/react-bootstrap": "^0.32.19",
    "@types/react-dom": "^15.5.0",
    "react": "^15.3.2",
    "react-bootstrap": "^0.32.4",
    "react-dom": "^15.3.2",
    "react-scripts": "3.1.1",
    "typescript": "3.6.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

这是我的package.json

with csvtable(col1, col2, col3, col4) as
(
select col1, col2, col3, col4 -- first csv file record
union all
select col1, col2, col3, col4 -- second csv file record
union all
.....
select col1, col2, col3, col4 -- two thousandth csv file record
)
select t1.col1, t1.col2, t2.col1, t2.col2
from csvtable t1
left join table2M t2 on ...

Answer 1

在此reactstrap示例中使用钩子不是强制性的。您可以创建基于类的组件，但仍然可以完成相同的功能。

import { Button, Collapse } from 'react-bootstrap';

class Example extends React.Component<any, any> {

  constructor(props: any) {
    super(props);
    this.state = {
      open: true
    };
  }

  handleClick = () => {
    this.setState( (prevState: { open: any; }) => ({
      open: !prevState.open
    }))
  }

  render() {
    const {open} = this.state
    console.log(open);
    return (
      <div>
      <Button
          onClick={this.handleClick}
          aria-controls="example-collapse-text"
          aria-expanded={open}
        >
          click
        </Button>
        <Collapse in={open} timeout={0}>
          <div id="example-collapse-text">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
            labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </Collapse>
      </div>
    );
  }
}

export default Example;

此外，请确保将react-strap样式表和脚本导入到public / index.html文件。将它们放入head标签

  <head>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <script
      src="https://unpkg.com/react/umd/react.production.min.js"
      crossorigin
    />

    <script
      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
      crossorigin
    />

    <script
      src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
      crossorigin
    />

    <script>
      var Alert = ReactBootstrap.Alert;
    </script>
  </head>

Answer 2

您可以通过react引用当前的implementation。

但是，我不建议重新创建它。所以这是真正的选择：

首先，如果您想开始使用挂钩，最好挑战一下不升级的原因。（许多人并没有对此提出质疑，但我想说，最好的选择永远是升级。它解决了安全性问题，使您不必重新发明轮子。
那是说；如果确实不是升级选项，则可以参考react: state and lifecycle的官方文档。这意味着您每次在组件中需要状态时都必须将组件转换为类。您可以参考@ChristopherNgo的答案，以了解您的实现情况。
在特定情况下，您可以使用redux来使状态对您的应用全局可用。在您的示例情况下，这可能毫无意义。

如何在React 15中使用useState和react-bootstrap

2 个答案: