Question

我有两个组成部分。如果我徘徊在一个上面，我想移动（通过改变样式比例）另一个组件。

我怎样才能做到这一点？

在纯粹的js中，它只是

let elem1 = document.querySelector('.elem1');
let elem2 = document.querySelector('.elem2');

elemt1.addEventListener('mouseover', () => {
 elem2.style.right = "200px" //or any other style property
})

所以..在反应中我们可以使用“ref”，如果我定义静态ref

，这是有效的

 import React, {Component} from 'react';

class MainCanvas extends Component {

    onHover(){
        console.log(this.refs.mybtntest);

    }

    render(){
        return(
            <div>
                <h1 onMouseEnter={() => this.onHover()}> Testing</h1>
                <button ref="mybtntest">Close</button>
            </div>
        );

    }

}
export default MainCanvas

但是在我的情况下我需要每个组件都应该动态添加“ref”属性..所以我的代码如下所示

import React, {Component} from 'react';

    class Test extends Component {

        onHover(e, dynamicRef){
            console.log(dynamicRef); //correct number of ref
            console.log(this.refs.dynamicRef); //undefined
            console.log(this.refBtnName); //button reference but eachtime is overrided
            console.log(this.dynamicRef);//undefinded

        }

        render(){

            const elements = this.props.elements.map( element => {
                let refBtnName = element.id + "btn";
                  return [
                    <ComponentElement
                        onHover={(e) => this.onHover(e, refBtnName)}
                        key={element.id} {...element}
                    />,
                    <button key={element.id*2}
                        ref={refBtnName => this.refBtnName = refBtnName}  //each time he will be overrided :(
                        className={`${refBtnName} deleteComponentBtn`} >
                        Close
                    </button>
                 ]

             })
            return(
                <div>
                    {elements}
                </div>
            );

        }

    }
    export default Test

一个真正的目标是我想要相对于元素定位按钮。我可以使用div作为包装器，但我不想要它。所以我想用例如这段代码

onHover(e, dynamicRef){
    Math.trunc(e.target.getBoundingClientRect().right)
    dynamicRef.style.right = `${right}px`;
}

Answer 1

如果您需要动态对象键，则不应使用点.而是使用括号：

ref={ref=> this[refBtnName] = ref}

请注意，我将内联参数更改为ref而不是refBtnName，因此您不会收到变量名冲突。

运行示例：

class App extends React.Component {
  state = {
    items: [
      { name: 'John', id: 1 },
      { name: 'Mike', id: 2 },
      { name: 'Jane', id: 3 },
    ]
  }

  move = refName => e => {
    this[refName].style.right = '-90px';
  }

  render() {
    const { items } = this.state;
    return (
      <div>
        {
          items.map(item => {
            return (
              <div key={item.id} >
                <div
                  ref={ref => { this[item.name] = ref }}
                  style={{ position: 'relative' }}
                >
                  {item.name}
                </div>
                <button onClick={this.move(item.name)}>Move {item.name}</button>
              </div>
            )
          })
        }
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
	<div id="root"></div>

如何在React DOM中操作样式/属性

1 个答案: