亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

import?React,{?Component?}?from?'react';class?TodoList?extends?Component{handlerClick(){this.setState({list:[...this.state.list,this.state.inputvalue],inputvalue:''})//this.state.list.push('1');}handleInput(e){this.setState({inputvalue:e.target.value});}//構造器constructor(props){super(props);this.state={list:['learn?react','learn?english','learn?vue'],inputvalue:''}}render(){return(<div><div><input?value={this.state.inputvalue}?onChange={this.handleInput.bind(this)}/><button?onClick={this.handlerClick.bind(this)}>add</button></div><ul>{this.state.list.map((item,index)=>{return?<li?key={index}>{item}</li>})}</ul></div>);}}export?default?TodoList;

import React,{ Component } from 'react';

class TodoList extends Component{

handlerClick(){

this.setState({

list:[...this.state.list,'1']

})

//this.state.list.push('1');

}

//構造器

constructor(props){

super(props);

this.state={

list:[

'learn react',

'learn english',

'learn vue'

]

}

}

render(){

return(

<div>

<div>

<input/>

<button onClick={this.handlerClick.bind(this)}>add</button>

</div>

<ul>

{

this.state.list.map((item,index)=>{

return <li key={index}>{item}</li>

})

}

</ul>

</div>

);

}

}

export default TodoList;

//定義函數
onClick={this.函數名}
//構造函數
constructor(props){
????super(props);
????this.state={
??????list:[
???????'1',
???????'2'?
??????]
????}
}
//循環
{
????this.state.數據.map((item)=>{
???????{item}
????})
}

子組件要想和父組件通信，子組件要先調父組件的方法

父組件通過屬性的方式向子組件傳遞參數，子組件通過props接收父組件傳來的參數。

react不需要直接操作DOM了
react的編程思想強調的是面向數據編程

render里面只能有一個包裹層，以前都寫div，現在可以用<React.Fragment></React.Fragment>代替來包裹

父組件向子組件傳值通過屬性名，子組件用this.props.調用。

子組件向父組件傳值通過，父組件傳過來到方法比如this.props.delete(i)

講的不錯，算是給我這個小白解惑了，以前真的是這么修改list的。以后知道要多...this.state.value。改數組要拷貝一份出來改

1. nodejs.org/en/

2. 下載LTS版本

3. 打開命令行工具?

????????node -v查看node版本

????????npm -v查看npm版本 npm會跟隨node一起安裝

????打開react官網，打開Docs，打開右邊Create a new React APP，然后往下找，復制npx create-react-app my-app，my-app是創建的文件的名字，然后按shift+鼠標右鍵打開命令行工具，復制進去運行，在文件里運行命令npm start。

????npx create-react-app my-app

????cd my-app

????npm start

成功創建項目文件！

子組件要調用父組件傳遞過來的方法

this.props.方法名( )

組件拆分，一個組件拆分成多個組件的組合

父子組件的概念

父組件通過屬性(props)的方式傳遞參數給子組件