Javascript 如何在同一元素上使用多个react组件？

我想悬停在一个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;

从“React”导入React；
类FollowMouse扩展React.Component{
状态={
xPos:0，
yPos:0
};
onMouseMove（e）{
这是我的国家({
xPos:e.screenX，
yPos:e.screenY
});
}
render（）{
返回(
{this.props.children（this.state.xPos，this.state.yPos）}
);
}
}
导出默认跟随鼠标；

构成部分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;

从“React”导入React；
类HoverProject扩展了React.Component{
状态={
我发现：错，
};
onMouseEnter（）{
this.setState（{isHovered:true}）；
}
请假{
this.setState（{isHovered:false}）；
}
render（）{
返回(
{this.props.children（this.state.isHovered）}
);
}
}
导出默认项目；

然后是父组件

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;

从“React”导入React；
//模块
从“../modules/HoverProject”导入HoverProject；
从“../modules/FollowMouse”导入FollowMouse；
从“../images/VLEC.png”导入VLEC；
类ProjectList扩展了React.Component{
建造师（道具）{
超级（道具）；
this.sels={
状态：“活动”
};
};
render（）{
返回(
我参与的项目
{this.props.data.map（（res，i）=>(
{
Ishored=>
{/*  */}
0{res.id+1}
{res.nomProjet}
{res.categProjet}
{res.roles}
{res.date}
}
))}
);
}
}
导出默认项目列表；

我不知道如何处理其他组件，您甚至可以像这样在父级中渲染child吗

---

我想把FollowMouse的道具作为img元素的样式属性传递

我不能100%确定我是否理解了你的问题，我不知道你希望

this.props.children

在作为函数调用时做什么，但是如果你想将props添加到子元素中，你可以通过：

constparentcomponent（{children}）=>(
{React.cloneElement(
React.Children.only（Children），//克隆唯一的子对象。。。
{style:{left:xPos，top:yPos}//…并添加新道具
)}
)

鉴于：

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

伍基人和帽子

子组件将获得额外的道具，相当于：

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

伍基人和帽子

我不能100%确定我是否理解了你的问题，我不知道你希望

这个.props.children

在作为函数调用时做什么，但是如果你想向子元素添加props，你可以通过：

constparentcomponent（{children}）=>(
{React.cloneElement(
React.Children.only（Children），//克隆唯一的子对象。。。
{style:{left:xPos，top:yPos}//…并添加新道具
)}
)

鉴于：

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

伍基人和帽子

子组件将获得额外的道具，相当于：

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

伍基人和帽子