React 技巧及学习资料

2022-05-16 05:25:54

总结在学习过程中遇到的问题和资料

注释要用 {/* 这是注释 */} 注意前后的空格

组件篇

纯文本组件

const Comment = ({ text }) => text.replace(':)', '[smile]');

class App extends Component {
  render() {
    return (
      <div>
        <Comment text="Text only components are awesome :)" />
      </div>
    );
  }
}

返回数组的纯文本组件
元素类型可不相同

const Fruits = () => [
  <li key="1">Pear</li>,
  <li key="2">Weater Melon</li>,
];

class App extends Component {
  render() {
   // 注意返回的是个数组，减少嵌套层级
    return [
      <ul>
        <li>Apple</li>
        <li>Banana</li>
        <Fruits />
      </ul>,
      <div>this is a div</div>,
    ];
  }
}