ReactJS, що динамічно відображає елемент HTML - html, реагує

Я тільки почав працювати з 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-даних, зберегти його і т.д. Я читав про React.findDOMNode і refs, однак, що, здавалося, не працює для мене, а також, я не знав, як відобразити його.

Я спробував наступне (перед методом візуалізації):

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

і ця внутрішня операція повернення:

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

Відповіді:

2 для відповіді № 1

Ви можете використовувати звичайний JS у вашій функції візуалізації. Щось на зразок цього:

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

Це дозволить оцінити чи state.show є вірним чи ні, і відображає або div або null, використовуючи потрійний оператор.

Докладніше про умовне візуалізацію можна прочитати тут: https://reactjs.org/docs/conditional-rendering.html

---