ReactJS，动态显示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);

这个内部返回语句：

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

---

可以在渲染函数中使用普通JS。大概是这样的：

{this.state.show&&{object}

这将评估

state.show

是否为真，并使用三元运算符呈现

div

或

null

---

您可以在React here中阅读有关条件呈现的更多信息：

我尝试在代码中使用此选项，但它抛出了错误，我在上面的问题中提到了这个错误（它指的是变量名）。切换不是问题，问题是我似乎无法显示列表。您得到的错误是指

if={this.state.show}

。react中不存在此语法。您还需要将

对象

用大括号括起来，例如

{object}

。我已经编辑了我的帖子。谢谢你关于花括号的提示，我完全忘记了。我编辑了我的问题以显示我收到的整个错误消息，我已经在第19行收到了该消息，所以我很确定这是因为变量，但我似乎无法准确地找出错误所在这是有条件地呈现内容的正确方法。嗯，命名似乎很有趣您的确切意思是什么？您不能直接在组件类中声明变量，必须在呈现方法中声明它：

render（）{const savedFilesNode=React.findDOMNode（this.refs.savedFiles）.

我的意思是，调用一个变量

对象

，将你的变量命名为有意义的东西，到时候你仍然可以查看你的代码，而不必滚动到它的定义并检查这个变量现在来自何处哦，是的，我很确定你的意思是，在我的实际代码中它不是对象，别担心

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

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

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

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