ReactJS, dynamisch ein HTML-Element anzeigen - html, reactjs

Ich habe gerade mit ReactJS angefangen und setze gerade ReactJS in mein aktuelles Projekt ein. Was ich jetzt versuche, ist folgendes:

Ich habe eine XML-Datei mit mehreren Dateinamen(Sie werden an einem anderen Punkt dynamisch hinzugefügt, was für diese Frage nicht relevant ist. Mein Standpunkt ist jedoch: Sie können nicht vorhersagen, welche Elemente in dieser Datei enthalten sein sollen). Ich verwende XMLHttpRequest und JavaScript, um die Daten in einer Liste zu speichern. Klicken Sie auf eine Schaltfläche, um die Liste anzuzeigen / auszublenden. Ich erstelle den Button mit ReactJS.

Button erstellen:

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

Umschaltfunktion hinzufügen:

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

Ich weiß, dass der Punkt von ReactJS hinzukommtElemente dynamisch, jedoch habe ich bereits den gesamten Code, um die XML-Daten abzurufen, zu speichern usw., da wäre es mir lieber, wenn Sie die bereits erzeugte Liste einfach mit ReactJS anzeigen / ausblenden. Ich habe über React.findDOMNode und Refs gelesen, jedoch schien das für mich nicht zu funktionieren und ich wusste auch nicht, wie ich es anzeigen sollte.

Ich habe folgendes versucht (vor der Render-Methode):

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

und diese innere Rückkehrerklärung:

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

aber offensichtlich hat es nicht funktioniert. Und ich bekomme die folgende Fehlermeldung: Syntax error: Unexpected token

Weiß jemand, wie das geht / ob es möglich ist?

Edit: hier ist der Fehler, den ich bekomme:

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

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

Antworten:

2 für die Antwort № 1

Sie können einfaches JS in Ihrer Renderfunktion verwenden. Etwas wie das:

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

Dies wird beurteilen, ob state.show ist wahr oder nicht und rendert entweder das div oder nullmit dem ternären Operator.

Weitere Informationen zum bedingten Rendern in React finden Sie hier: https://reactjs.org/docs/conditional-rendering.html

---