How to use

Item

function

in

Item

render() {
  return (
  <List size="large"
   bordered
   dataSource={data}
   renderItem={item => (<List.Item><List.Item.Meta
   title={<a href={item.link}>{item.title}</a>}
   /></List.Item>)}
  />
  );
 }

render(){
    const {msg} = this.state;
    return (<div>
      <List
       dataSource={msg}
       renderItem={(item)=>{
         return (
           <List.Item actions={}>

           </List.Item>
         )
       }}
       />
    </div>)
  }

confObj.map(seg => {
      return (
        <Descriptions.Item key={seg.seg} label={(
          <>
            {seg.seg}
            <span style={{color: '#999'}}>
              {seg.config.dis_name ? ` - ${seg.config.dis_name}` : ''}
            </span>
            {seg.config.desc ? (
              <Tooltip title={seg.config.desc}>
                {' '}
                <Icon type="question-circle-o" />
              </Tooltip>
            ) : null}
          </>
        )}>
          {seg.configs ? this.renderObject(seg.configs) : seg.config.value}
        </Descriptions.Item>
      )
    })

const NoteList = () => {
  const {notes, dispatch} = useContext(mainContext);
  return (
    <List
      grid={{ gutter: 15, column: 2 }}
      dataSource={notes}
      renderItem={note => (
      <List.Item>
        <Card 
          extra={<Button type="danger" onClick={() => {dispatch({type:"Delete", id:note.id})}}> Done </Button>} 
          title={note.title}
          >
            {note.detail}
        </Card>
      </List.Item>
      )}
    />
  )
}

const renderItem = (item, props) => (
 <List.Item key={item.id} className="movie-list">
  <div className="poster">
   <Link to={`/movie/${item.id}`}>
    <img
     src={`https://image.tmdb.org/t/p/w342${item.poster_path}`}
     alt=""
     width="180"
    />
   </Link>
  </div>

  <div className="content">
   <h2>{item.title}</h2>
   <p>{item.overview}</p>
   <ul className="">
    <li>Release Date: {item.release_date}</li>
    <li>Popularity: {item.popularity}</li>
   </ul>
   <div className="movie-list-options">{_renderOptions(props, item)}</div>
  </div>
 </List.Item>
)

render() { 
    return (
      <div style={{margin:'10px', width: '600px'}}>
        <h1>React and Redux TodoList</h1>
        <div style={{marginBottom:'10px'}}>
          <Input 
            placeholder={this.state.inputValue} 
            onChange={this.changeInputValue}
            value={this.state.inputValue}
            style={{width: '250px',marginRight:'10px'}}/>
          <Button type="primary" onClick={this.handleClick}>增加</Button>
          <Button type="link" onClick={this.handleMockData}>Mock数据</Button>
        </div>
        <List
          header={<strong>任务列表</strong>}
          footer={<a href="https://github.com/dunizb/CodeTest/tree/master/React/redux/React-and-Redux-TodoList" rel="noopener noreferrer" target="_blank">查看代码</a>}
          bordered
          dataSource={this.state.list}
          loading={this.state.loading}
          renderItem={(item, index) => (
            <List.Item
              actions={[<Icon type="close-circle" theme="filled" key="delete-item" onClick={this.deleteItem.bind(this, index)} />]}
            > 
              {item}
            </List.Item>
          )}
        />
      </div>
    );
  }

const DocumentsList = ({ documents, renderItem }) => (
  <List
    bordered
    className={`${styles.list}`}
    dataSource={documents}
    size="large"
    renderItem={item => <List.Item>{renderItem(item)}</List.Item>}
  />
)

render() {
    if( this.props.videos.length === 0 ) {
     return (
       <List
         style={{ "width": "40%"}}
         size={"large"}
         header={<div>Video Suggestions</div>}
         bordered
         dataSource={ this.state.data }
         renderItem={item => (<List.Item>{item}</List.Item>)}
       />
     )
    }

    const videoItems = this.props.videos.map((video, index) => {
      return (
        <VideoListItem
          key={ index }
          video={video}
          onUserSelected={ this.props.onVideoSelect.bind( this, [ index ]) }
        />
      )
    });

    return (
      <ul style={{ "listStyle":"none" ,"width":"40%", "padding": "5px", "border": "1px solid #efefef", "marginBottom": "3px", "borderRadius": "5px" }}>
        { videoItems }
      </ul>
    );
  }

}) => (
 <Card size="small">
  <List.Item
   actions={[<Statistic title="Popularity" value={popularity} suffix="%" style={{ cursor: 'initial' }} />]}
   <List.Item.Meta
    avatar={<Avatar shape="square" size={48} src={imageUrl} />}
    title={name}
  </List.Item>
 </Card>

render() {
  return (
   <div>
    <List
     itemLayout="vertical"
     size="large"
     dataSource={this.props.things}
     renderItem={item => (
      <List.Item
       key={item.title}
       actions={!this.props.loading && [<IconText key="1" type="star-o" text="156" />, <IconText key="2" type="like-o" text="156" />, <IconText key="3" type="message" text={item.commentsCount} />]}
      >
       <Skeleton loading={this.props.loading} active>
        <List.Item.Meta
         title={<Link to={`/${item.id}`}>{item.title}</Link>}
         description={item.headline}
        />
        {/* {item.body} */}
       </Skeleton>
      </List.Item>
     )}
    />
   </div>
  );
 }

const renderItem = (item, props) => (
 <List.Item>
  <Link to={`/movie/${item.id}`}>
   <Tooltip title={item.title}>
    <img
     src={`https://image.tmdb.org/t/p/w342${item.poster_path}`}
     alt=""
     width="100%"
    />
   </Tooltip>
  </Link>
  <div className="movie-card-options">
   <IconWatchLater
    onClick={() => props.onWatchLaterClick(item)}
    marked={
     props.lists && !!props.lists.watchLater.find(v => v.id === item.id)
    }
   />
   <IconFavorite
    onClick={() => props.onFavoriteClick(item)}
    marked={
     props.lists && !!props.lists.favorite.find(v => v.id === item.id)
    }
   />
  </div>
 </List.Item>
)

function renderTestQuestion(question, question_index) {
  return (
    <List.Item key={question_index}>
      <Row gutter={8}>
        <Col span={24}>
          <Form.Item
            name={`disc_${question_index}`}
            label={<Translate id={`tests.disc.${question_index}.title`}/>}
              ))}
            </Radio.Group>
          </Form.Item>
        </Col>
      </Row>
    </List.Item>

function TodoList({ todoList, deleteTask }) {
 return (
  <TodoItemStyle>
   <List
    bordered
    dataSource={todoList.toJS()}
    renderItem={(todo, index) => (
     <List.Item
      actions={[
       <Button
        type="danger"
        size="small"
        onClick={() => deleteTask(index)}
       >
        delete
       </Button>
      ]}
     >
      {todo.task}
     </List.Item>
    )}
   />
  </TodoItemStyle>
 );
}

const NewsList = (props) => {

  return (
    <List
      itemLayout="horizontal"
      dataSource={props.posts}
      renderItem={item => (
        <List.Item>
          <List.Item.Meta
            title={item.title}
            description={item.body}
          />
        </List.Item>
      )}
    />
  )
}

function renderTestQuestion(question, question_index) {
  return (
    <List.Item key={question_index}>
      <Row gutter={8}>
        <Col span={24}>
          <Form.Item
            name={`disc_${question_index}`}
            label={<Translate id={`tests.disc.${question_index}.title`}/>}
              ))}
            </Radio.Group>
          </Form.Item>
        </Col>
      </Row>
    </List.Item>