如何在ReactJS中围绕Bootstrap表单绘制边框？

Question

我是JavaScript和ReactJS的新手。

我想得到什么

我想创建一个具有以下布局的页面：

如您所见，两种形式都有一个边框。这就是我想要的 实现（在注册表单中添加边框）。

我为实现结果所做的工作

我根据this tutorial创建了一个简单的NodeJS / React应用程序。

然后我定义了条目页面（包含两个表单的页面），如下所示：

import React, { Component } from 'react';
import { Button, Row, Col, Jumbotron } from 'react-bootstrap';
import SignUpForm from './SignUpForm';

class EntryPage extends Component {
  render() {
    return (
      <div>
        <Jumbotron>
          <h1>CTR Predictor</h1>
          <p>CTR Predictor allows you to automatically estimate the optimal price for keyword combinations used in search engine marketing campaigns.</p>
        </Jumbotron>
        <Row>
          <Col xs={6} md={3}><SignUpForm /></Col>
          <Col xs={6} md={6}>Place for the login form</Col>
        </Row>
      </div>
    )
  }
}

export default EntryPage;

SignUpForm定义如下。

import React, { Component } from 'react';
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
import style from './style';

class SignUpForm extends Component {
  render() {
    return (
      <div class="signUpForm">
        <form>
          <FormGroup
            controlId="formBasicText"
          >
            <ControlLabel>Working example with validation</ControlLabel>
            <FormControl
              type="text"
              placeholder="Enter text"
              onChange={this.handleChange}
            />
            <FormControl.Feedback />
            <HelpBlock>Validation is based on string length.</HelpBlock>
          </FormGroup>
        </form>
      </div>
    )
  }
}

export default SignUpForm;

style.js与上面的文件位于同一目录中，包含：

const style = {
  signUpForm: {
    border:'2px solid #000000',
  }
}

module.exports = style;

当我运行应用程序时，注册表单周围没有边框。

我尝试修复错误

我尝试将bsClass='signUpForm'（按照建议here）添加到FormGroup的声明中 SignUpForm，但没有帮助。

如何修复此错误（确保显示表单周围的边框）？

Answer 1

首先，我会将样式的导入更改为此import {signUpForm} from ./style和此

  <div class="signUpForm">

更改为

  <div style={signUpForm}>

但重要的是，你正在使用react，因此你不能写类，反应使用className="name-of-class"

您正在导出样式，而不是css，因此您需要在样式属性中使用它而不是在className中。