javascript - Reactjs，发送和读取变量

Question

所以基本上我使用 ref 来获取 componentDidMount() 中的组件尺寸，我可以读取和 console.log 它给了我宽度 我想要(查看代码)，但是当我想在 render() 方法中读取 console.log 并使用该信息时，它给我未定义。我也不知道出了什么问题

var Tooltip = React.createClass({

  componentDidMount() {
    this.tooltipSize = this.refs.tooltip.getBoundingClientRect();
    this.tooltipWidth = this.tooltipSize.width;
    // console.log(this.tooltipWidth); here it gives me the width
  },

  render(){
    var tooltipSize,
        tooltipWidth,
        tooltipStyle = {
          top: 0,
          left: 0,
        };
        // console.log(tooltipWidth); here it gives me undefined
    return(
      <div ref="tooltip" className="tooltip" style={tooltipStyle}>{this.props.tooltip}</div>
    );
  }
});

var Button = React.createClass({

  getInitialState() {
      return {
          iconStyle: this.props.iconStyle,
      	  style: this.props.style,
          cursorPos: {},
      };
  },

  componentDidMount() {
    this.size = this.refs.button.getBoundingClientRect();
  	this.width = this.size.width;
    this.height = this.size.height;
    this.top = this.size.top;
  	this.left = this.size.left;
  },

  ...
  
  render() {

    var _props = this.props,
      top,
      left,
      width,
      height,
      size,
     //other variables
  ...

    	return(
        <Style>
        {`
          .IconButton{
            position: relative;
          }
          .IconButton:disabled{
            color: ${_props.disabledColor};
          }
          .btnhref{
            text-decoration: none;
            background-color: blue;
          }
        `}
        <a {...opts} className="btnhref" id="tak">
	        <button ref="button" className={"IconButton" + _props.className} disabled={disabled} style={buttonStyle}
	        onMouseEnter={this.showTooltip} onMouseLeave={this.removeTooltip} >
	          <Ink background={true} style={rippleStyle} opacity={rippleOpacity} />
	          <FontIcon className={_props.iconClassName}/>
	        </button>
        </a>
        </Style>
		);

  }
});

class IconButton extends React.Component {
  render(){
    return(
    <div>
      <Tooltip tooltip={this.props.tooltip} />
      <Button href={this.props.href} className={this.props.className} iconStyle={this.props.iconStyle} style={this.props.style} iconClassName={this.props.iconClassName} disabled={this.props.disabled} disableTouchRipple={this.props.disableTouchRipple} />
    </div>
    );
  }
}

还有一件事。如何将包含另一个组件(按钮组件)尺寸信息的变量发送到工具提示组件？因为我需要在这个组件内部使用它们来放置它。谢谢

更新的代码:

var Tooltip = React.createClass({

  getInitialState() {
      return {
        tooltipWidth: null,
        tooltipHeight: null
      };
  },

  componentDidMount() {
    this.tooltipSize = this.refs.tooltip.getBoundingClientRect();
    this.setState({
      tooltipWidth: this.tooltipSize.width,
      tooltipHeight: this.tooltipSize.height
    });
  },

...
  
  render(){
    var _props = this.props,
        fontSize,
        fontStyle,
        tooltipSize,
        tooltipWidth = this.state.tooltipWidth,
        tooltipHeight = this.state.tooltipHeight,
        w = this.props.buttonWidth,
        h = this.props.buttonHeight,
        y = this.props.buttonTop,
        x = this.props.buttonLeft,
        tooltipStyle = {
            top: y - tooltipHeight - 20 + "px",
            left: x - tooltipWidth/2 + w/2 + "px",
          };;

...

    return(
      <div ref="tooltip" className="tooltip" style={fontStyle}>{this.props.tooltip}</div>
    );
  }
});

var Button = React.createClass({

  getInitialState() {
      return {
          iconStyle: this.props.iconStyle,
      	  style: this.props.style,
          cursorPos: {},
          width: null,
          height: null,
          top: null,
          left: null,
      };
  },

  componentDidMount() {
    this.size = this.refs.button.getBoundingClientRect();
    this.width = this.size.width;
    this.height = this.size.height;
    this.top = this.size.top;
    this.left = this.size.left;
  },

  transferring1(){
    var width = this.width;
    return width;
  },

  transferring2(){
    var height = this.height;
    return height;
  },

  transferring3(){
    var top = this.top;
    return top;
  },

  transferring4(){
    var left = this.left;
    return left;
  },

...
  
  render() {

    var _props = this.props,
   	  opts,
      top,
      left,
   	  width,
   	  height,
   	  size;

...
  
    	return(
        <Style>
        {`
          .IconButton{
            position: relative;
          }
          .IconButton:disabled{
            color: ${_props.disabledColor};
          }
          .btnhref{
            text-decoration: none;
            background-color: blue;
          }
        `}
        <a {...opts} className="btnhref" id="tak">
	        <button ref="button" className={"IconButton" + _props.className} disabled={disabled} style={buttonStyle}
	        onMouseEnter={this.showTooltip} onMouseLeave={this.removeTooltip} >
	          <Ink background={true} style={rippleStyle} opacity={rippleOpacity} />
	          <FontIcon className={_props.iconClassName}/>
	        </button>
        </a>
        </Style>
		);

  }
});

class IconButton extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      buttonWidth: null,
      buttonHeight: null,
      buttonTop: null,
      buttonLeft: null,
    };
  }

  componentDidMount() {
    this.setState({
      buttonWidth: this.refs.btn.transferring1(),
      buttonHeight: this.refs.btn.transferring2(),
      buttonTop: this.refs.btn.transferring3(),
      buttonLeft: this.refs.btn.transferring4(),
    });
  }

  render(){
    return(
    <div>
      <Tooltip tooltipPosition={this.props.tooltipPosition} tooltip={this.props.tooltip} touch={this.props.touch} buttonWidth={this.state.buttonWidth} buttonHeight={this.state.buttonHeight} buttonTop={this.state.buttonTop} buttonLeft={this.state.buttonLeft}/>
      <Button ref="btn" href={this.props.href} className={this.props.className} iconStyle={this.props.iconStyle} style={this.props.style} iconClassName={this.props.iconClassName}
      disabled={this.props.disabled} disableTouchRipple={this.props.disableTouchRipple} />
    </div>
    );
  }
}

ReactDOM.render(
 <IconButton href="" className="" iconStyle="" style="" iconClassName="face" disabled="" disableTouchRipple="" tooltip="! ! ! Guzik ! to ! kozak ! ! !" tooltipPosition="" touch="true" />,
 document.getElementById('app')
);

Answer 1

我认为你应该使用状态在 react 中设置变量

示例

var Tooltip = React.createClass({
  constructor(){
    super();
    this.state = {tooltipWidth: 0}
  }

  componentDidMount() {
    this.tooltipSize = this.refs.tooltip.getBoundingClientRect();
    this.setState({tooltipWidth: this.tooltipSize.width}); //Update the state of this component
  },

  render(){
    console.log(this.state.tooltipWidth) //your tooltip width
    return(
      <div ref="tooltip" className="tooltip" style={tooltipStyle}>{this.props.tooltip}</div>
    );
  }
});

为了传递另一个组件的尺寸，您应该计算父组件(IconButton)上 Button 组件的大小。

然后将其传递给工具提示，如下所示(仅示例)

<Tooltip buttonHeight={this.state.buttonHeight} tooltip={this.props.tooltip} />