React条件渲染、列表渲染和组件传值

import React from 'react';
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      items: []
    };
  }
 
  componentDidMount() {
    this.fetchData();
  }
 
  fetchData = () => {
    this.setState({ isLoading: true });
    // 模拟异步获取数据
    setTimeout(() => {
      this.setState({
        items: ['Item 1', 'Item 2', 'Item 3'],
        isLoading: false
      });
    }, 2000);
  }
 
  render() {
    const { isLoading, items } = this.state;
 
    return (
      <div>
        {isLoading ? (
          <div>Loading...</div>
        ) : (
          <ul>
            {items.map(item => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        )}
      </div>
    );
  }
}
 
export default App;

这段代码展示了如何在React中实现条件渲染，列表渲染以及组件状态的管理和传递。它首先在组件的生命周期中获取数据，然后根据数据是否加载完成来渲染不同的UI元素。这是学习React的一个很好的起点。