function定义的组件写法（传参）

      // 父组件向子组件传参 使用props      function Todo(props) {        // console.log(props);        const { content } = props;        return <p>{content}</p>;      }      // 在react中我们可以使用hooks来为function定义的组件设置局部状态      // 16.8之后新增的写法，目前react组件定义的主流写法      // React.useState可以为组件设置局部状态      //  返回一个数组作为返回值      //    参数一 表示状态数据的名字      //    参数二 表示设置状态的方法      // 在jsx语法中事件使用驼峰的命名方式      function Todos() {        const [list, setList] = React.useState([{ id: 1, content: "起床" }]);        return (          <div className="todos">            <input              placeholder="请输入内容"              onKeyUp={(e) => {                if (e.keyCode === 13) {                  // alert(e.currentTarget.value);                  // 当state数据改变之后组件会重新渲染                  setList([                    ...list,                    { id: Date.now(), content: e.currentTarget.value },                  ]);                  e.currentTarget.value = "";                }              }}            />            {list.map((item) => (              <Todo key={item.id} content={item.content} />            ))}          </div>        );      }      function App() {        return (          <>            <h1>hello world！</h1>            <p>我是一段很长的自我介绍！！！</p>            <hr />            <Todos />          </>        );      }