//コンポーネントにレンダリング関数しかない場合は、ステートレスコンポーネントで定義できます。実際、ステートレスコンポーネントは単なる関数です。
//ステートレスコンポーネントのパフォーマンスは比較的高く、単なる関数です
通常の定義
import React from 'react';
import { Input, Button, List } from 'antd';
class ToDoListUI extends Component {
render() {
return (
<div style={
{ margin: '10px' }}>
<Input placeholder="请输入内容"
value={this.props.inputValue}
style={
{ width: '300px', marginRight: '10px' }}
onChange={this.props.inputChange}
></Input>
<Button type="primary" onClick={this.props.butClick}>提交</Button>
<List
style={
{ width: '300px', marginTop: '10px' }}
bordered
dataSource={this.props.list}
renderItem={(item, index) => (
<List.Item onClick={(index) => this.props.deleteItem(index)}>
{item}
</List.Item>
)}
/>
</div>
)
}
}
export default ToDoListUI
ステートレスコンポーネントの定義
import React from 'react';
import { Input, Button, List } from 'antd';
const ToDoListUI = (props) => {
return (
<div style={
{ margin: '10px' }}>
<Input placeholder="请输入内容"
value={props.inputValue}
style={
{ width: '300px', marginRight: '10px' }}
onChange={props.inputChange}
></Input>
<Button type="primary" onClick={props.butClick}>提交</Button>
<List
style={
{ width: '300px', marginTop: '10px' }}
bordered
dataSource={props.list}
renderItem={(item, index) => (
<List.Item onClick={(index) => props.deleteItem(index)}>
{item}
</List.Item>
)}
/>
</div>
)
}
export default ToDoListUI