用react绘制一个正方形的代码
时间: 2023-03-12 11:05:52 浏览: 61
可以这样写:import React from 'react';class Square extends React.Component {
render() {
return (
<div style={{
width: '100px',
height: '100px',
backgroundColor: 'red'
}}>
</div>
);
}
}export default Square;
相关问题
用 antd + react 写一个登录页面代码
我可以提供一个参考的示例代码:import React from 'react';
import { Form, Input, Button } from 'antd';class LoginForm extends React.Component {
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}; render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className="login-form">
<Form.Item>
{getFieldDecorator('username', {
rules: [{ required: true, message: '请输入用户名!' }],
})(
<Input
placeholder="用户名"
/>,
)}
</Form.Item>
<Form.Item>
{getFieldDecorator('password', {
rules: [{ required: true, message: '请输入密码!' }],
})(
<Input
type="password"
placeholder="密码"
/>,
)}
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button">
登录
</Button>
</Form.Item>
</Form>
);
}
}const WrappedLoginForm = Form.create({ name: 'normal_login' })(LoginForm);export default WrappedLoginForm;
react material 写一个Autocomplete组件代码实现
好的,以下是一个使用 React 和 Material-UI 编写的 Autocomplete 组件示例代码:
```
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/core/Autocomplete';
const options = ['Option 1', 'Option 2', 'Option 3'];
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
width: '25ch',
},
},
}));
const AutocompleteComponent = () => {
const classes = useStyles();
return (
<form className={classes.root} noValidate autoComplete="off">
<Autocomplete
id="autocomplete-demo"
options={options}
renderInput={(params) => (
<TextField {...params} label="Autocomplete" variant="outlined" />
)}
/>
</form>
);
};
export default AutocompleteComponent;
```
这个组件使用 Material-UI 提供的 `Autocomplete` 和 `TextField` 组件,在一个表单内部渲染了一个自动补全选择器。
我们首先定义了选项数组 `options`,然后使用 `makeStyles` 函数创建一个样式表,之后渲染了一个表单,内部包含一个 `Autocomplete` 组件和一个带标签和边框的 `TextField` 组件。
`Autocomplete` 组件的 `options` 属性接收了我们之前定义的选项数组,`renderInput` 属性用于渲染 `TextField` 组件,最终将这个自动补全选择器返回。
希望这个代码能够帮助到你,如果有不理解的地方可以随时问我。