[标准]react的Props获取传递内容——超详细

zhuanbike 2021-12-26 874

React学起来还是蛮快的,除了基于es6的内容需要过一遍之外,其他都很好理解。

这里再详细写一个标准笔记避免以后用的时候遗忘,再百度就慢多了。每一行哥都写有注释哦……

import React from "react"; //引入react
import ReactDOM from "react-dom";//引入react-dom 输出到网页必备
class Zhaohu extends React.Component {  //创建一个 Zhaohu 组件 从 React.Componet中继承
render() {                              //render()渲染函数,感觉类似vue中的 el: ,想输出都要有render
    return <li>你好,{this.props.content}</li>;  // 在 React 中,函数式组件会默认接收一个 props 参数,然后返回一段 JSX
   }
}
class App extends React.Component {
  render() {
  const todoList=["张三","李四","王五","张三小弟"];  //定义一个常量
  return (
<ul>
<Zhaohu content={todoList[0]}/>  //给Zhaohu这个组件的content赋值
<Zhaohu content={todoList[1]}/>
<Zhaohu content={todoList[2]}/>
<Zhaohu content={todoList[3]}/>
</ul>
);
  }
}
ReactDOM.render(<App />, document.getElementById("root")); // 将App这个组件中的赋值结果 ,输出到id标签为root的html块中。


最新回复 (0)
发新帖