您可以通过左右滑屏查看更多笔记内容。。

React 基础

31 Aug 2019 . category: tech .
更多笔记

React 基础

八.组件的拆分

//拆分组件－－－－－－
   const isSearched=serachTeam=>item=>
      item.title.toLowerCase().includes(serachTeam.toLowerCase());

  class　App extends Component{
    //构造函数
    constructor(){
      super();
      this.state={
        list,
        serachTeam:'',
      }
      //绑定删除函数
      this.onDissmisss=this.onDissmisss.bind(this);
      //绑定onSerachChange函数
      this.onSerachChange=this.onSerachChange.bind(this);
    }
    //删除函数
    onDissmisss(id){
      // 找到除点击外的其他id
      function isNotId(item){
        return item.objectID!==id;
      }
      //在原数组中筛选包含其他id的一个新的数组
      const updateList=this.state.list.filter(isNotId);
      // 重新设置state
      this.setState({list:updateList});
    }
    //onChange函数,event对象的target属性中带有输入框的值
    onSerachChange(event){
      // 得到我输入框的内容
      this.setState({serachTeam:event.target.value});
    }
    // render()函数,onChange 当内容发生改变时触发
    render(){
      const {serachTeam,list}=this.state;
      return(
        <div className="App">
          {/* 用于搜索的输入组件 */}
          <Search
          value={serachTeam}
          onChange={this.onSerachChange}
          />
          {/* 用于展示的列表组件 */}
          <Table
          list={list}
          pattern={serachTeam}
          onDissmisss={this.onDissmisss}
          />
          </div>         
      );
    }               
  }
  //Search 组件
  class Search extends Component{
    render(){
      // value={serachTeam},onChange={this.onSerachChange} 
      const{value,onChange}=this.props;
      return(
        <form>
        <input type="text" 
        value={value}
        onChange={onChange}
        />
       </form>  
       );
    }
  }
  //Table组件
  class Table extends Component{
    render(){
      // list={list}, pattern={serachTeam},onDissmisss={this.onDissmisss}
      const {list,pattern,onDissmisss}=this.props;
      return(
        <div>
          {list.filter(isSearched(pattern)).map(item=>
            <div key={item.objectID}>
               <span>
                  <a href={item.url}>{item.title}</a>
                </span>
                <span>{item.points}</span>
                <span>{item.author}</span>
                <span>{item.num_comments}</span>
                <span>
                  <button
                    onClick={()=>onDissmisss(item.objectID)} 
                    type="button"
                  >
                    Dissmiss</button>
                  </span>
            </div>
            )}
        </div>
        
      )
    }
  }
export default App;
  • this.props 与 this.state 的区别：

都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

九.可组合组件

在 props 对象中还有一个小小的属性可供使用: children 属性。通过它你可以将元素从上 层传递到你的组件中,这些元素对你的组件来说是未知的,但是却为组件相互组合提供了 可能性。

当只将一个文本(字符串)作为子元素传递到 Search 组件中.
<Search
    value={searchTerm}
    onChange={this.onSearchChange}
>
	//编写内容
	Search
</Search>

#####　在 Search 组件可以从 props 对象中解构出 children 属性。然后它就可以指定这个 children应该显示在哪里。

class Search extends Component {
	render() {
		const { value, onChange, children } = this.props;
		return (
			<form>
				//制定显示位置
				{children} 
				<input
				type="text"
				value={value}
				onChange={onChange}
				/>
			</form>
		);
	}
}