如何在同一元素上使用多個反應組件？

Question

我想將鼠標懸停在div上，將圖像顯示在該div內，顯示它，然后使圖像跟隨我的光標。 懸停組件正在工作，但是我無法使跟隨光標組件工作。 您將如何去做？

組件編號1：

import React from 'react';

class FollowMouse extends React.Component {

    state = {
        xPos: 0,
        yPos: 0
    };

    onMouseMove(e) {
        this.setState({
            xPos: e.screenX,
            yPos: e.screenY
        });
    }

    render() {
        return (
            <div
                onMouseMove={this.onMouseMove.bind(this)}
                className="img-ctn"
            >
                {this.props.children(this.state.xPos, this.state.yPos)}
            </div >
        );
    }
}
export default FollowMouse;

組成部分2：

import React from 'react';

class HoverProject extends React.Component {

    state = {
        isHovered: false,
    };

    onMouseEnter() {
        this.setState({ isHovered: true });
    }
    onMouseLeave() {
        this.setState({ isHovered: false });
    }

    render() {
        return (
            <div
                onMouseEnter={this.onMouseEnter.bind(this)}
                onMouseLeave={this.onMouseLeave.bind(this)}
                className="project-item"
            >
                {this.props.children(this.state.isHovered)}
            </div >
        );
    }
}
export default HoverProject;

然后是父組件。

import React from 'react';

// modules
import HoverProject from '../modules/HoverProject';
import FollowMouse from '../modules/FollowMouse';


import VLEC from '../images/vlec.png';

class ProjectList extends React.Component {

    constructor(props) {
        super(props);

        this.sels = {
            state: 'active'
        };
    };

    render() {
        return (
            <div className="project-list module">

                <div className="sectionTitle">Project I've worked on</div>

                {this.props.data.map((res, i) => (
                    <HoverProject key={i}>
                        {
                            isHovered =>
                                <div className="inner-ctn">
                                    {/* <FollowMouse /> */}
                                    <img className={"project-image " + (isHovered ? this.sels.state : "")} src={VLEC} alt="VLEC" />
                                    <div className="header">
                                        <div className="number">0{res.id + 1}</div>
                                        <div className="name">{res.nomProjet}</div>
                                    </div>
                                    <div className="item-ctn">
                                        <div className="categ">{res.categProjet}</div>
                                        <div className="roles">{res.roles}</div>
                                        <div className="date">{res.date}</div>
                                    </div>

                                </div>
                        }
                    </HoverProject>
                ))}
            </div>
        );
    }
}
export default ProjectList;

我不知道該如何處理其他組件，您是否可以像這樣在父對象中渲染子對象？

我想將FollowMouse的道具作為img元素的樣式屬性傳遞。

Answer 1

我不是100％肯定會遵循您的問題，也不知道您期望this.props.children作為函數調用時會做什么，但是如果您想將props添加到child元素中，則可以所以通過React.cloneElement ：

const ParentComponent ({children}) => (
  <div>
    {React.cloneElement(
      React.Children.only(children), // clone the only child...
      { style: { left: xPos, top: yPos} } // ...and add new props
    )}
  </div>
)

鑒於：

<ParentComponent>
  <div>Wookies and Hats</div>
</ParentComponent>

子組件將獲得其他道具，等效於：

<ParentComponent>
  <div style={{left: xPos, top: yPos}}>Wookies and Hats</div>
</ParentComponent>