#11 获取文本的高度


  • 0
    administrators

    @fingertip 你代码用可以 markdown 包裹起来,这样看起来会好很多。


  • 0

    @陈小俊 为什么在您的函数式组件写法里面不需要考虑componentDidMount这个状态啊?


  • 0
    管理员

    @lunarsprite 这里本身就可以不用在组件周期方法里执行操作


  • 0

    class Post extends Component {
      handleConsole(){
        console.log(this.p.clientHeight)
      }
    
      render () {
        return (<p ref={(p)=>this.p = p} onClick={this.handleConsole.bind(this)}>{this.props.content}</p>)
      }
    }
    

    原来直接获取高度就可以了


  • 0

    class Post extends Component {
      render () {
        return (
          <p 
            ref={(p) => this.p = p} 
            onClick={console.log(this.p.clientHeight)}>{this.props.content}
          </p>
        )
      }
    }
    

    写成这样一直报undefined, 百思不得其解


  • 0

    class Post extends Component {
      render () {
        return (
          <p onClick={(e)=>{
            console.log(e.target.clientHeight)
          }}>{this.props.content}</p>
        )
      }
    }
    
    

    或者

    class Post extends Component {
      render () {
        return (
          <p ref={(dom)=>{this.p = dom}} onClick={()=>{
            console.log(this.p.clientHeight)
          }}>{this.props.content}</p>
        )
      }
    }
    

  • 0

    @ScriptOJ

    交下作业


  • 0

    class Post extends Component {
      
      showHeight(){
        console.log(this.refs.hg.clientHeight);
      }
      render () {
        return (<p ref="hg" onClick={()=>{this.showHeight();}}>{this.props.content}</p>)
      }
    }
    Post.propTypes = {
      content:PropTypes.string.isRequired
    }
    

  • 0

    @Roy 为啥不用this.p.style.clientHeight?


  • 0

    @krystal offsetHeight换成clientHeight试试?


  • 0

    @lunarsprite 无状态组件只是一个函数,不是普通组件,没有生命周期


  • 0

    class Post extends Component {
        handleClick(){
            //直接获取p元素的可视高度
            // let height1=this.p.clientHeight;
            //如果有同学想通过css来获取高度的话,可以用getComputedStyle,它获取的是最终应用在元素上的所有css属性对象
            //element.style只能获取style属性中的css样式,在这里会返回空
            let height=parseInt(window.getComputedStyle(this.p).height);
        }
        render () {
            const content='this.props';
            return (<p ref={(p)=>this.p=p}  onClick={this.handleClick.bind(this)}>{content}</p>)
        }
    }
    

  • 0

    class Post extends Component {
      static defaultProps={
        content:''
      };
      handleClick(){
        const h = this.p.clientHeight;
        console.log(h);
      }
      render () {
        return (<p ref={(p)=>this.p=p} content="sfdsfdf" onClick={this.handleClick.bind(this)}>{this.props.content}</p>)
      }
    }
    

  • 0

    class Post extends Component {
    sayHeight(){
    console.log(this.dom.offsetHeight)
    }
    render () {
    return (
    <p onClick={this.sayHeight.bind(this)} ref={(p)=>{this.dom = p}}>
    {this.props.content}
    </p>)
    }
    }
    提交正确


  • 0

    class Post extends Component {
      static defaultProps = {
        content: ""
      }
      handleClick(){
        console.log(this.p.clientHeight)
      }
      render () {
        return (<p ref={(p) => this.p = p} onClick={this.handleClick.bind(this)}>{this.props.content}</p>)
      }
    }
    

  • 0

    测试通过,给大家参考一下:

    class Post extends Component {
      constructor(){
        super();
        this.state = {
          content:''
        }
      }
      componentDidMount(){
        this.p.offsetHeight
      }
      handleClickOnBtn(){
        console.log(this.p.offsetHeight)
      }
      render () {
        return (<p ref = {(p) => {this.p = p}} onClick = {this.handleClickOnBtn.bind(this)}>{this.props.content}</p>)
      }
    }
    

  • 0

    constructor(){
    super()
    // 设置 initial state
    this.state = {
    content:"我是文本,点击获取高度"
    }
    }
    componentDidMount(){
    this.p.offsetHeight
    }
    handleClickOnBtn(){
    console.log(this.p.offsetHeight)
    }
    render () {
    return (
    <p ref = {(p) => {this.p = p}} onClick = {this.handleClickOnBtn.bind(this)}>
    {this.state.content}
    </p>
    )
    }


  • 0

    class Post extends Component {
      handleClick(){
        console.log(this.p.clientHeight)
      }
      render () {
        return (<p ref={(p)=> this.p = p} onClick={this.handleClick.bind(this)}>{this.props.content}</p>)
      }
    }
    

  • 0

    为什么用state,高度总是和内容高度不一样,直接输出this.p.clientHeight就能正常通过了
    constructor() {
    super()
    this.state = {
    height: ''
    }
    }
    componentDidMount() {
    const height = this.p.clientHeight;
    this.setState({height})
    }
    handleClick() {
    console.log(this.state.height)
    }
    render() {
    return (
    <p ref={(p) => this.p = p} onClick={this.handleClick.bind(this)}>{this.props.content}</p>
    )
    }


  • 0

    0_1511850933861_upload-275b59de-aa03-4a6a-b779-d4b6ebf7c8d7

    0_1511850948205_upload-d48a541d-b519-47fe-9142-16a7a42f9010

    这是什么鬼???


登录后回复
 

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