时间戳

首页 > 解决方案 > 如何使用 jquery 向 DOM 添加反应组件？

javascript - 如何使用 jquery 向 DOM 添加反应组件？

问题描述

这可能是一个非常简单的问题，但是我想用 react 和 jquery 将组件添加到网格中。gridGame 是一个黑色的 100 像素 x 100 像素的正方形，我想在其中添加项目。我使用的行（一个变量）女巫是一个从 1-9 到的数字，并将其相加gridGame-${rows}，如此处所示，因此它可以自动更新要加入的正确行。值应该是： gridGame-${row} （数字行从 1 到 9 是多少）然后我想在 gridGame 中添加一个名为 <Test /.> 的组件（在代码的看不见的部分中，女巫被声明为顶部）。

下面的函数有我认为可以在这种情况下工作的 jquery：

 function = (rows) => {
console.log(`joining ${rows}`)
let value= $(`#gridGame-${rows}`);
  
value.append("<Test />");
value.css("background-color", 'brown');
$(".create-coinflip-box").css("display", "none");

}

css 背景更改有效，但 value.append 不显示反应组件。

这是 <Test /.> 中的 React 组件：

    import React from 'react';
import StatusIcon from './img/image.png';
import Player1Icon from './img/image.png'


class newGame extends React.Component {
    render() {
        return(
            <div>  
              HELLO
            </div>
        );
    }
}

export default newGame;

老实说，我对这不起作用的想法是 0。

谢谢您的帮助 ：）

标签： javascriptjqueryreactjsjsx

解决方案

这个答案来自评论中的大卫。对我来说，问题是我试图通过一个按钮来渲染一个组件，而不是实际渲染它的自身。

解决方案是改为让按钮更改状态，以更新 React DOM。然后只需要一个 if 语句来检查状态然后显示组件。

他的评论解释得更好，并为我解决了这个问题。

推荐阅读