ReactJS, ktorý dynamicky zobrazuje element HTML - html, reakjs

Práve som začal s ReactJS a v súčasnosti implementujem ReactJS do môjho súčasného projektu. To, čo sa práve snažím teraz, je nasledovné:

Mám súbor XML s niekoľkými názvami súborov(dynamicky sa pridávajú v inom bode, čo nie je pre túto otázku relevantné.) Moja poznámka je, že nemôžete predpovedať, čo / koľko prvkov bude v tomto súbore. Používam XMLHttpRequest a JavaScript, aby som uložil dáta do zoznamu. Po kliknutí na tlačidlo, chcem zobraziť / skryť uvedený zoznam. Vytváram tlačidlo pomocou funkcie ReactJS.

Vytvorenie tlačidla:

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);

Pridanie funkcie prepínania:

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>
);
}
}

Viem, že bod ReactJS je potrebné doplniťprvky dynamicky, ale už mám všetok kód, aby som dostal XML dáta, aby som ich uložil atď., tam by som radšej jednoducho ukázať / skryť už vygenerovaný zoznam pomocou ReactJS. Čítal som o React.findDOMNode a odmietol som, že to nefungovalo pre mňa a tiež som nevedel, ako to zobraziť.

Snažil som sa (pred metódou renderovania):

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

a toto vnútorné vyhlásenie o vrátení:

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

ale samozrejme to nefungovalo A ja dostanem nasledujúce chybové hlásenie: Syntax error: Unexpected token

Vie niekto ako to urobiť / ak je to možné?

Upraviť: tu je chyba, ktorú získam:

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

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

odpovede:

2 pre odpoveď č. 1

Môžete použiť jednoduché JS vo funkcii renderu. Niečo také:

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

Toto vyhodnotí, či state.show je pravdivé alebo nie, a vykresľuje buď div alebo null, pomocou ternárneho operátora.

Viac informácií o podmienenom vykresľovaní nájdete v časti Reagovať tu: https://reactjs.org/docs/conditional-rendering.html

---