ReactJS, 동적으로 HTML 요소 표시

Question

방금 ​​ReactJS를 시작했고 현재 현재 프로젝트에 ReactJS를 구현 중입니다. 지금 당장하고 싶은 것은 다음과 같습니다 :

나는이 파일과는 다른 점에서 동적으로 추가되는 여러 파일 이름을 가진 XML 파일을 가지고 있습니다. 어쨌든, 요점은, 당신은 그 파일에 어떤 요소가 얼마나 많은지 예측할 수 없다). 데이터를 목록에 저장하기 위해 XMLHttpRequest와 JavaScript를 사용하고 있습니다. 버튼을 클릭하면 해당 목록을 표시하거나 숨기고 싶습니다. ReactJS를 사용하여 버튼을 만들고 있습니다. 토글 기능 추가

const styles = theme => ({ 
    button: { 
    margin: theme.spacing.unit, 
    }, 
    input: { 
    display: 'none', 
    }, 
}); 

class RaisedButtons extends React.Component { 

    constructor(props) { 
     super(props); 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick(e) { 
     this.props.toggleView(); 
    } 

    render() { 
    const { classes } = this.props; 
     return (
     <div> 
      <Button raised color="primary" className={classes.button} onClick={this.handleClick}> 
      {this.props.title} 
      </Button> 
     </div> 
    ); 
    } 
} 
RaisedButtons.propTypes = { 
    classes: PropTypes.object.isRequired, 
}; 

export default withStyles(styles)(RaisedButtons); 

:

버튼 만들기

export default class EditButton extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = {show: false}; 
    this.toggleView = this.toggleView.bind(this); 
} 

toggleView() { 
    this.setState({ 
     show: !this.state.show 
    }); 
} 

render() { 
    return (
     <div> 
     <ButtonRaised toggleView={this.toggleView} title="Edit"/> 
     <div if={this.state.show} tag="section"></div> //Supposed to be the list 
     </div> 
     ); 
    } 
} 

내가 ReactJS의 포인트는 동적 요소를 추가하는 것을 알고를, 그러나, 나는 이미 모든 코드가 XML 데이터를 가져 와서 저장하는 등, ReactJS를 사용하여 이미 생성 된 목록을 표시하거나 숨기는 것을 선호합니다. React.findDOMNode에 대해 읽었습니다. 그러나 ref는 나에게 효과가없는 것으로 보였습니다. 또한 그것을 표시하는 방법을 알지 못했습니다.

var object = React.findDOMNode(this.refs.savedFiles); 

이 내부 return 문 :

나는 다음 (렌더링 메소드 전) 시도

<div if={this.state.show} tag="section"> 
    object 
</div> 

을하지만, 분명히 그것은 작동하지 않았다. Syntax error: Unexpected token이

사람이 가능한 경우/그렇게하는 방법을 알고 있나요 : 그리고 다음과 같은 오류 메시지가 받고 있어요?

편집 :

이

./src/toggleButton.js 
Syntax error: Unexpected token (19:5) 

    17 | } 
    18 | 
> 19 | var object = React.findDOMNode(this.refs.savedFiles); 
    | ^

Answer 1

당신은 당신의 렌더링 기능에 일반 JS를 사용할 수 있습니다 여기에 내가지고있어 오류가 있습니다. 이런 식으로 뭔가 :

{this.state.show && <div tag"section">{ object }</div> }

이 state.show이 사실인지 여부를 평가하고, 렌더링 중 삼항 연산자를 사용하여 div 또는 null. 여기 반작용에

조건부 렌더링에 대한 자세한 내용을보실 수 있습니다 : https://reactjs.org/docs/conditional-rendering.html이