로드 반응 버튼을 클릭하여 사용하기

Question

반응을 사용하여 지정된 div에 react.js 파일을로드하는 동안 그물과 관련된 것을 찾지 못했다는 클래스를 만들고 싶습니다.

Answer 1

확인이 예 :

당신이 2 구성 요소 App and Child가 있다고 가정하자, 그리고 확인란을 선택에 render 아이 컴퍼넌트에 원이 conditional rendering라고합니다.

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/

는 App 구성 요소에 파일 가져 오기 파일 child.js을 app.js 너 한테 알려주지. 어떤 도움이 필요합니다.