Question

我想在我的爱好项目中显示一个彩票轮。我在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”）来简单地获取正确的元素，但是请教我一种使用该主结构渲染组件和子组件的好习惯（类扩展Component）谢谢！

Answer 1

它是类还是功能组件都没有关系。您可以并且应该将它们的子组件放在render()中（当然，在适当的import之后）。

在特定情况下，您的Wheel组件需要获取要渲染的现有DOM元素（el属性），并且您的#wheel元素应在{{1 }}初始化，在此期间尚不存在。问题在于功能的排序（不幸的是，Wheel总是排在最后）。

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

render()

Answer 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 />
}

反应渲染

2 个答案: