Question

我可以使用reactJS组件的实例来渲染组件。例如，我们说我的reactJS组件是

class myComponent extends Component{
  constructor(props){
    super(props)
    this.state = {
      next:false
    }
    this.alertSomething = this.alertSomething.bind(this);
    this.showNext = this.showNext.bind(this);
  }

  showNext(){
    console.log('wow');
    console.log(this.state, this, this.state.next);
    this.setState({next:true});
  }

  alertSomething(){
    alert('Alert Something')
    console.log(this.state, this, this.state.next);
    this.setState({next:true});
  }

  render(){

    return(
      <div className='column'>
      </div>
    )
  }
}

export default myComponent

现在，我可以在另一个组件内部进行操作;

    let x = new displayContent.renderComponent();
    render(
     <x />
     //or
     <x.render />
    )

//我尝试过它没有工作，我认为还有其他方法来实现这一点，毕竟每个组件都只是一个javascript对象。

同时，我可以调用函数来改变其状态。等。

x.someFunction();

其中someFunctino位于反应组件内部，执行setState。

有可能吗？或者我错过了什么？

编辑：我清楚地知道，当您想要渲染反应组件时，您始终可以执行<component />。这个问题只是出于好奇，可以这样做吗？如果没有，那么为什么？，我的意思是与其他javascript对象有什么不同。

Answer 1

好吧，您可以使用React.createElement方法渲染组件：

React.createElement(Component, params)

但是使用JSX，这是相同的：

<Component />

请参阅React文档中的Multiple components。

Answer 2

这不是你应该如何使用React。您不必处理对象实例化; React为你做这件事。改为使用构图。

render() {
  return (
    <myComponent />
  )
}

此外，如果要从父组件设置子组件的状态，则应该移动父组件中的逻辑。

Answer 3

可能你正在寻找这样的东西。

import React, { Component } from "react";
import CamCapture from './CamCapture.js';

export default class ProctorVideoFeed extends Component{

constructor(props) {
    super(props);
    
    this.Camera = React.createElement(CamCapture);
    
    }

    //this.handleVideoClick = this.handleVideoClick.bind(this);


render(){
    return(
        <div>
            <span>{this.Camera}</span>
            <button onClick = {this.Camera.StopRecording}>Stop</button>
        </div>
    )
}

}

这里的 StopRecording 是一个在 CamCapture 类中定义的函数。

reactJs组件实例以呈现组件

3 个答案: