时间戳

首页 > 解决方案 > 在 React 中渲染状态元素

javascript - 在 React 中渲染状态元素

问题描述

我有一个名为的状态changedFields，它是一个包含编辑数据时更改的字段的列表。

        <Dialog
          open={this.state.isDialogOpen}
          onClose={this.handleClose}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitle 
            id="responsive-dialog-title"
          >
            {'ARE YOU SURE YOU WISH TO MAKE THESE CHANGES?'}
          </DialogTitle>
          <DialogContent>
            <DialogContentText>
              <td style={{ 'font-weight': 'bold', 'border-bottom': '0px', 'margin-right': '2em' }}>You changed:</td>
              <td>
                <tr>{this.state.changedFields}</tr>
              </td>

            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary">
              DISCARD CHANGES
            </Button>
            <Button onClick={this.handleClose} color="primary" autoFocus>
              YES, KEEP CHANGES
            </Button>
          </DialogActions>
        </Dialog>

我是这样写对话的。这看起来像：

在此处输入图像描述

我试图将每个元素description、trelloURL和slackChannel放在不同的行中，但这只是将每个元素放在一行中而没有空格。

如果我想将它们放在不同的行中，我该如何渲染它？

标签： javascriptreactjs

解决方案

目前，你只是这样做：

<tr>{this.state.changedFields}</tr>

...这将使用 React 的默认“将此数组转换为字符串”，然后一个接一个地输出元素。

class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      changedFields: [
        "description",
        "trelloUrl",
        "slackChannel"
      ]
    };
  }
  render() {
    return (
      <table>
        <tbody>
          <tr>{this.state.changedFields}</tr>
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

你需要做一些事情来创建你想要的换行符；也许是单独的行：

一种选择是将它们各自放在自己的行中：

{this.state.changedFields.map(field => <tr><td>{field}</td></tr>)}


class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      changedFields: [
        "description",
        "trelloUrl",
        "slackChannel"
      ]
    };
  }
  render() {
    return (
      <table>
        <tbody>
              {this.state.changedFields.map(field => <tr><td>{field}</td></tr>)}
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

td或者如果合适，使用多个s将其放在一个中div，因为它们默认为display: block（或任何其他元素并适当地设置其样式）：

<tr><td>{this.state.changedFields.map(field => <div>{field}</div>)}</td></tr>


class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      changedFields: [
        "description",
        "trelloUrl",
        "slackChannel"
      ]
    };
  }
  render() {
    return (
      <table>
        <tbody>
          <tr>
            <td>{this.state.changedFields.map(field => <div>{field}</div>)}</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

您现在已经说过您希望它们在 旁边You changed，而不是在不同的行中。这更简单：只需将它们放在同一个中td：

<td style={{ 'font-weight': 'bold', 'border-bottom': '0px', 'padding-right': '2em' }}>You changed:</td>
<td>{this.state.changedFields.join(" ")}</td>


class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      changedFields: [
        "description",
        "trelloUrl",
        "slackChannel"
      ]
    };
  }
  render() {
    return (
      <table>
        <tbody>
          <tr>
            <td style={{ 'font-weight': 'bold', 'border-bottom': '0px', 'padding-right': '2em' }}>You changed:</td>
            <td>{this.state.changedFields.join(" ")}</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

旁注：强烈建议使用类或类似的 CSS，而不是内联样式。

推荐阅读