#11 获取文本的高度


  • 0
    administrators

    完成 Post 组件,接受一个字符串的 content 作为 propsPost 会把它显示到自己的 <p> 元素内。

    并且,点击 <p> 元素的时候,会使用 console.log 把元素的高度打印出来。


  • 1

    想问问这里的高度是什么高度呢?我用clientHeight总是通不过

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

  • 0
    administrators

    @yyssjj33 注意题目说的:

    会使用 console.log 把元素的高度打印出来。


  • 0

    一直出错,

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

    请大佬指正


  • 0

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

    总是提示没有打印东西 不是已经绑定了事件了吗?


  • 1

    贴一段函数式组件的写法

    const Post = props => {
      const node = {}
      const consoleMsg = () => {
        console.log(node.p.clientHeight)
      }
      return (
        <p ref={ p => { node.p = p } } onClick={consoleMsg}>{props.content}</p>
      )
    }
    

  • 8
    管理员

    结合一下以上同学的写法哈

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

  • 0

    @krystal 你打印的是前一次提交的高度吧?


  • 0

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

    不知道这样合适不


  • 0

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

    这样通不过也,不晓得啥问题


  • 0
    管理员

    @PARADISELIN
    因为this.pHeight 不是 this.p.clientHeight,你要保证它们时时刻刻相等。
    你应该在点击的时候让this.pHeight = this.p.clientHeight,然后输出this.pHeight


  • 0

    @陈小俊 真的太感谢了!我之前的代码变成了只打印上次获取的高度了


  • 1

    @xzzzzz style是行内样式的意思,你都没设置是获取不到的


  • 0

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

    这样是不是正确的呀


  • 0

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


  • 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>
        )
      }
    }
    

登录后回复
 

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