React 账户注销协议布局

好的，下面是一个简单的 React 账户注销协议布局的示例代码：

import React from 'react';

function AccountCancellation() {
  return (
    <div className="container">
      <div className="content">
        <h1>账户注销协议</h1>
        <p>这里是协议的具体内容，可以根据实际情况进行编写。</p>
      </div>
      <div className="form">
        <h2>账户注销</h2>
        <form>
          <div className="form-group">
            <label htmlFor="username">用户名</label>
            <input type="text" id="username" name="username" required />
          </div>
          <div className="form-group">
            <label htmlFor="password">密码</label>
            <input type="password" id="password" name="password" required />
          </div>
          <button type="submit">提交</button>
        </form>
      </div>
    </div>
  );
}

export default AccountCancellation;

在上面的代码中，我们使用了 React 的函数组件来实现页面的布局。布局的结构与上面的 HTML 代码相同，只是使用了 JSX 语法来描述页面结构。同时，我们将样式也放在了同一个文件中，使用了 CSS Modules 的方式来管理样式。

CSS 代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.content {
  flex: 1;
  max-width: 600px;
  margin-right: 20px;
}

.form {
  flex: 0 0 300px;
}

.form h2 {
  font-size: 1.5em;
}

.form form {
  border: 1px solid #ccc;
  padding: 20px;
  margin-top: 20px;
}

.form label {
  display: block;
  margin-bottom: 5px;
}

.form input[type="text"],
.form input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

.form button[type="submit"] {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

在使用时，我们可以像下面的代码一样引入组件并放在需要的位置上：

import React from 'react';
import AccountCancellation from './AccountCancellation';

function App() {
  return (
    <div>
      {/* 其他页面内容 */}
      <AccountCancellation />
      {/* 其他页面内容 */}
    </div>
  );
}

export default App;

希望这个示例能够帮助到您！