2.标签中混入
JS表达式时要用{}
。
3.样式的类名指定不要用class，要用
className
。
4.内联样式，要用
style={
{key:value}}
的形式去写。
5.只有
一个根标签
6.标签必须闭合
7.标签首字母
(1).若
小写字母开头
，则将该标签转为
html中同名元素
，若html中无该标签对应的同名元素，则报错。
(2).若
大写字母
开头，react就去渲染对应的
组件
，若组件没有定义，则报错。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.hello {
width: 200px;
height: 200px;
background-color: rgb(231, 244, 250);
line-height: 200px;
text-align: center;
</style>
<div id="hello"></div>
</body>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> /* 此处一定要写babel */
const name = "张三";
const old=18;
//1.创建虚拟DOM
const VDOM = <div className="hello">我叫{name},今年{old}岁！</div> /* 此处一定不要写引号，因为不是字符串 */
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('hello'))
</script>
</html>
二、通过数组建立虚拟dom
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.hello {
width: 200px;
height: 200px;
background-color: rgb(231, 244, 250);
/* line-height: 200px; */
text-align: center;
overflow: hidden;
</style>
<div id="hello"></div>
</body>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> /* 此处一定要写babel */
const info = ["张三", 18, "男"];
//1.创建虚拟DOM
const VDOM = (
<div className="hello">
<h3>学生信息</h3>
info.map((item)=>{
return <div style={{fontSize:'18px',height:"30px"}}> {item}</div>
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('hello'))
</script>
</html>
let newTableStore = tableStore;
let newOperates = to
JS
TableStore.operates.filter((item,index)=>{
return item.text != "日志" && item.text != "共享"
if(newOperates.length>0){
to
JS
(newTableStore).operates.splice(0)
今天遇到了一个问题，在
数组
中push了很多
数组
，然后想给push进去的
数组
中对象
赋值
的时候，发现所有的值都变成了最后一个值，摸不着头脑，找不到原因为什么会这样，后来在同事的帮助先，终于解决了这个问题，现在赖记录一下过程以及解决
方法
。
arry: [
group: "A组",
hcgSchedules: [
medicalRecordNum: "bbbbb",
import Asign from './view/asign'
import './App.css';
import
React
, { Component } from '
react
'
export default class App extends Component {
state={
name:"jack",
arr:['a', 'b', 'c'],
fn:()=>{
console.log('
javascript
:(function () {
setNativeValue = function (qs, value) {
const element = document.querySelector(qs);
const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
在
React
开发中遇到了一个问题：
需求是在一个选择组件中选择数据mydata
数组
，确定后将mydata
数组
返回到父组件，再次打开该选择组件时，从父组件获取之前选择的数据mydata并显示为已选择。
/* 打开选择组件 */
showModal = () => {
this.setState({
comVisible: tru...
