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

Question

I want to use react-bootstrap's Collapse in a project, but it requires useState from react-hooks, which has been introduced in react version 16.8. 我想在项目中使用react-bootstrap的Collapse，但是它需要react-hooks中的useState，这是在react版本16.8中引入的。 However, the project is still on react version 15.3 and updating is not an option. 但是，该项目仍在React 15.3版上，并且不能进行更新。

Can someone suggest how to implement this react-bootstrap example using react 15.3? 有人可以建议如何使用react 15.3实现此react-bootstrap示例吗？

  function Example() {
    const [open, setOpen] = useState(false);

    return (
      <>
        <Button
          onClick={() => setOpen(!open)}
          aria-controls="example-collapse-text"
          aria-expanded={open}
        >
          click
        </Button>
        <Collapse in={open}>
          <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>
      </>
    );
  }

  render(<Example />);

Here is my package.json 这是我的package.json

{
  "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"
    ]
  }
}

Answer 1

It's not mandatory that you use hooks for this reactstrap example. 对于此reactstrap示例，并非必须使用钩子。 You can create a class-based component and still accomplish the same feature. 您可以创建基于类的组件，但仍可以完成相同的功能。

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;

Also, make sure to import the react-strap stylesheet and scripts to your public/index.html file. 另外，请确保将react-strap样式表和脚本导入到public / index.html文件。 Put these in the head tag 将它们放在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

You can refer to the current implementation by react. 您可以通过react引用当前的实现。

However, i wouldn't recommend recreating it. 但是，我不建议重新创建它。 So here are the real options: 所以这是真正的选择：

First it might be a good idea to challenge the reasons for not upgrading if you want to start using hooks. 首先，如果要开始使用挂钩，挑战不升级的原因可能是一个好主意。 (many people don't challenge this, but i'd say the best option would always be to upgrade. It resolves security issues and prevents you from having to reinvent the wheel. （许多人并没有对此提出质疑，但是我想说最好的选择永远是升级。它解决了安全性问题，使您不必重新发明轮子。
That said; 那就是 if it's really not an option to upgrade, you may refer to the official documentation for react: state and lifecycle . 如果确实不是升级选项，则可以参考官方文档中的react：state和lifecycle 。 It will mean that you have to convert your components into classes every time you need state in your component. 这意味着您每次在组件中需要状态时都必须将组件转换为类。 You may refer to the answer from @ChristopherNgo for what your implementation would look like. 您可以参考@ChristopherNgo的答案，以了解您的实现情况。
For specific cases you may use redux, to make the state globally available to your app. 在特定情况下，您可以使用redux来使状态对您的应用全局可用。 In your example case it may make little sense however. 在您的示例情况下，这可能毫无意义。

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

问题描述

2 个解决方案

解决方案1
4 2019-08-28 22:08:01

解决方案2
1 2019-08-28 22:16:05

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

问题描述

2 个解决方案

解决方案1 4 2019-08-28 22:08:01

解决方案2 1 2019-08-28 22:16:05

解决方案1
4 2019-08-28 22:08:01

解决方案2
1 2019-08-28 22:16:05