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

Question

我有两个组件。如果我将鼠标悬停在一个组件上，我想移动(通过更改样式比例)另一个组件。

我怎样才能做到这一点？

在纯 js 中它很简单

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

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

所以..在 react 中我们可以使用“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>