通过单击按钮加载使用React

Question

我想创建一个类，该类在将react.js文件加载到使用react指定的div中时，我在网上没有找到任何与此相关的东西。

Answer 1

检查以下示例：

假设您有2个组件App and Child ，并且想要在选中复选框时render子组件，这称为conditional rendering 。

app.js文件，在App组件中导入文件child.js ：

import Child from './child';

class App extends React.Component {
    constructor() {
        super();
        this.showComments = this.showComments.bind(this);
        this.state = {
            showComponent: false,
        };
    }

    showComments(e) {
        this.setState({
            showComponent: e.target.checked,
        });
    }

    render() {
           return (
                <div className="add_checkbox">
                   <span>Enable Comments</span>
                   <input className="checkbox" type="checkbox" name="enable_comment" onClick={this.showComments} value="enable_comment"/>
                   {this.state.showComponent ? <Child/>  : null}
                </div>
        )
    }
}

child.js文件：

export default class Child extends React.Component{
   render(){
       return(
          <div>Hello</div>
       );
   }
}

ReactDOM.render(<App />, document.getElementById('container'));

检查fiddle的工作示例： https : //jsfiddle.net/ztx9kd1w/

让我知道您是否需要任何帮助。