#14 React.js 加载、刷新数据 - 高阶组件


  • 0

    @胡子大哈 额 不好意思哈 this.setState({ content }) 和this.setState({ content:content }) 这个我还是没看懂能帮忙讲解下么


  • 0
    administrators

    @francis 前者是后者的简写。两者的效果是一样的。


  • 0

    @胡子大哈 就是 我想问 为啥 这么写可以 这个是ES6的新特性还是什么?我要看的话应该哪查?


  • 0
    administrators

    @francis ES6 的新特性


  • 0

    @胡子大哈 在 #14 React.js 加载、刷新数据 - 高阶组件 中说:

    ES6 的新特性

    好的好的 谢谢啊 感觉问这些东西很弱。。。


  • 0

    const loadAndRefresh = (url)=>{
      return (WrappedComponent)=>class extends Component{
          constructor(props) {
          super(props);
          this.state = {
            content:'数据加载中...'
          }
        }
        
        componentDidMount(){
          this.refresh();
        }
        
        refresh=()=>{
          this.setState({content:'数据加载中...'});
          var getUrl=getData(url);
          getUrl.then((res)=>{
            this.setState({content:res});
          })
        }
        
        render(){
          return <WrappedComponent refresh={this.refresh} content={this.state.content} {...this.props} /> 
        }
      }
    }
    

  • 0

    const loadAndRefresh = (url)=>{
        return function(wrapedComponent){
          class wrapComponent extends Component{
            constructor(){
              super();
              this.state={
                content:'数据加载中...'
              }
            }
            componentWillMount(){
              this.refresh();
            }
            refresh(){
              getData(url).then((data)=>{
                this.setState({
                  content:data
                })
              })
            }
            render(){
              return(
                <wrapedComponent content={this.state.content} refresh={this.refresh.bind(this)} {...this.props} />  
              )
            }
          }
          return wrapComponent;
        }
      }
    

    @胡子大哈 为什么总是报返回的组件应该包裹传入的组件,我明明已经使用了


  • 0
    administrators

    @小弋 组件要用大写字母


  • 0

    @胡子大哈 谢谢,大意了


  • 0

    所有传给 loadAndRefresh 返回的组件的 props 要原封不动传给被包裹的组件。

    这句不是太明白什么意思


  • 0

    const loadAndRefresh = (url) => {
      return (WrappedComponent) => {
        class WrapperComponent extends React.Component{
          constructor(props){
            super(props)
            this.state = {
              //isLoading: false,
              content: ''
            }
          }
          componentWillMount(){
            this.handleRefresh()
          }
          handleRefresh(){
            this.setState({
              //isLoading: true,
              content: '数据加载中...'
            })
            getData(url).then((result)=>{
              this.setState({
                //isLoading: false,
                content: result
              })
            })
          }
          render(){
            return (
              <div>
                <WrappedComponent 
                  content={this.state.content} 
                  refresh={()=>{this.handleRefresh()}} 
                  {...this.props} 
                />
              </div>
            )
          }
        }
        return WrapperComponent
      }
    }
    

  • 0

    // getData(url) 已经可以直接使用
    // 本站的环境都可以使用 async/await
    const loadAndRefresh = (url) => {
      return (WrappedComponent) => {
        class NewComponent extends Component {
          constructor() {
            super();
            this.state = {
              content: ''
            }
          }
          async getData() {
            return await getData(url)
          }
          loadData() {
            this.setState({content: '数据加载中...'});
            this.getData().then((content)=>{
              this.setState({content})
            });
          }
          componentWillMount() {
            this.loadData();
          }
          handleFresh() {
            this.loadData();
          }
          render() {
            return <WrappedComponent
                content={this.state.content}
                refresh={this.handleFresh.bind(this)}
                {...this.props}
              />
          }
        }
        return NewComponent
      }
    }
    

  • 0

    // getData(url) 已经可以直接使用
    // 本站的环境都可以使用 async/await

    const loadAndRefresh = (url) => {
    return (UnWrappedComponent) => {
    class WrappedComponent extends Component {
    constructor (props) {
    super(props)
    this.state = {
    content: '数据加载中...'
    }
    }

            componentWillMount () {
                this.refresh()
            }
    
            refresh = () => {
                this.setState( { content: '数据加载中...'} )
                var getUrl = getData(url)
                getUrl.then((res) => {
                    this.setState({content: res})
                })
            }
    
            render() {
                return(
                    <UnWrappedComponent 
                        refresh={ this.refresh.bind(this) }
                        content={ this.state.content}
                        {...this.props}
                    />
                )
            }
        }
        return WrappedComponent
    }
    

    }


  • 0

    ...this.props
    一直不是很理解这个语句,为什么还要传递整个props呢,content和refresh不是已经传进去了么


  • 0

    @zhongshankaka 因为他还有可能有其他的props,就是父组件传给他的,这里面只是继承后,再给他添加两个props而已,应该是是这样的


  • 0

    @ScriptOJ 您好,我想请问下render函数里面的...this.props中的this为什么是指向WrappedComponent的?这行代码的this和其他地方的this指向不一样的?


  • 0

    @ScriptOJ 为什么这里没有初始化state就直接用setstate呀?这样的写法规范么?谢谢~


  • 0

    // getData(url) 已经可以直接使用
    // 本站的环境都可以使用 async/await
    
    const loadAndRefresh = (url)=>(WrappedComponent)=>{
      class NewComponent extends Component{
        constructor(){
          super();
          this.state = {
            content:null
          }
        }
        componentWillMount(){
           this.setState({content:"数据加载中..."})
          // const content = await getData(url)
          getData(url).then((content)=>{
            this.setState({content})
          });
        }
        handleRefresh(){
          this.componentWillMount();
        }
        render(){
    
          return(
            <WrappedComponent  content ={this.state.content}  refresh={ this.handleRefresh.bind(this)} {...this.props}/>
            )
        }
      }
      return NewComponent
     
    }
    

  • 0

    const loadAndRefresh = url => Component =>
      class WrappedComponent extends React.Component {
        state = {
          content: ''
        }
      
        refresh = async () => {
          this.setState({
            content: '数据加载中...'
          })
          
          const content = await getData(url)
          
          this.setState({
            content
          })
        }
      
        render () {
          return <Component {...this.props} content={ this.state.content } refresh={ this.refresh } />
        }
        
        componentWillMount () {
          this.refresh()
        }
      }
    
    

  • 0

    const loadAndRefresh = url => WrappedComponent => {
    class NewComponent extends React.Component {
    constructor () {
    super()
    this.state = {
    content: ''
    }
    }

    componentWillMount () {
      this.refresh()
    }
    
    async refresh () {
      let content = ''
      this.setState({
        content: '数据加载中...'
      })
      content = await getData(url)
      this.setState({
        content
      })
    }
    
    render () {
      return (
        <WrappedComponent
          {...this.props}
          content={this.state.content}
          refresh={this.refresh.bind(this)}
        />
      )
    }
    

    }
    return NewComponent
    }


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待