反应渲染答案

【问题标题】：React rendering反应渲染
【发布时间】：2020-08-07 17:55:54
【问题描述】：

我想在我的爱好项目上展示一个彩票轮盘。我在 npm 'lottery-wheel' 中找到了这个包，并尝试安装并渲染它，但没有成功。

我安装了它：

npm install lottery-wheel

我将它包含在组件文件中：

import Wheel from 'lottery-wheel';

我想在 div 中渲染它（id: 'wheel'）：

    render() {
          const wheel = new Wheel({
            el: document.querySelector("#wheel"),
            data: [{
              text: 'apple',
              chance: 20
            }, {
              text: 'banana'
            }, {
              text: 'orange'
            }, {
              text: 'peach'
            }],
            onSuccess(data) {
              console.log(data.text);
            }
          });
    
        return (
                <div id="wheel">
                    {wheel}
                </div>
        );
    }

当我有这样的结构时，我不知道把它放在哪里......

class Lottery extends Component {

}

我可以简单地使用 document.querySelector("#wheel") 获取正确的元素，但请教我一个使用此主结构（类扩展组件）呈现组件和子组件的良好做法谢谢！

【问题讨论】：

就渲染和返回而言，像你一样渲染就可以了。请检查你的轮子，可能是你做错了什么。
尝试使用 ref 代替 document.querySelector reactjs.org/docs/refs-and-the-dom.html

标签： javascript reactjs npm frontend

【解决方案1】：

不管是类还是函数组件。您可以而且应该将它们的子组件放在render() 中（当然，在足够的import 之后）。

在您的特定情况下，您的 Wheel 组件需要获取要呈现到的现有 DOM 元素（el 属性），并且您的 #wheel 元素在 Wheel 初始化之后呈现并且不存在期间。问题在于函数的排序（不幸的是，render() 总是排在最后）。

这里的简单解决方案是： a) 在index.html 中创建一个#wheel 元素（不推荐，因为它会干扰将整个应用程序渲染为一个div 的主要React 概念）； b) 在 componentDidMount() 中初始化您的 Wheel（如果您不了解 React 生命周期，请阅读它 - 非常基础）或其等效的钩子 - 这些只是在 render() 之后执行：

useEffect(() => {
    //your initialization here
}, []);

【讨论】：

是的，但是在这种情况下如何？观察这个例子，它是一个“功能组件”，对吗？那么我把它放在哪里呢？我不能把它放在渲染中，因为我需要的 div 甚至没有在它之前渲染`render() { const wheel = new Wheel({ el=docoment.querySelector("#wheel") bla bla bla}) return (
{wheel}
) } `
好的，用 componentDidMount() 解决了，我之前一定错过了一些东西，因为我以为我试过了。但是，当我没有功能组件时，我将如何使用“useEffect”？ --> useEffect 和要渲染的位置之间的联系是什么？
很高兴为您提供帮助 :) 正如我所说 - 它要么是生命周期函数（在类组件中），要么是等效的钩子（在函数组件中）。你不能在类组件中使用钩子，在功能组件中不能使用生命周期函数。如果答案满足您的答案，请将其标记为正确。

【解决方案2】：

尝试使用引用 https://reactjs.org/docs/refs-and-the-dom.html

类似的东西

class Wheel extends React.Component {
  constructor(props) {
    super(props);
    this.wheelRef = React.createRef();
  }

  componentDidMount() {
    const wheel = new Wheel({
      el: this.wheelRef.current,
      data: [
        {
          text: 'apple',
          chance: 20,
        },
        {
          text: 'banana',
        },
        {
          text: 'orange',
        },
        {
          text: 'peach',
        },
      ],
      onSuccess(data) {
        console.log(data.text);
      },
    });
  }

  render() {
    return <div ref={this.wheelRef} />;
  }
}

export default Wheel;


// Other file 
import Wheel from '../wheel';


render () {
  return <Wheel />
}

【讨论】：