Question

我有一个名为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放在不同的行中，但这只是将每个元素放在一行中而没有空格。

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

Answer 1

目前，您只是这样做：

<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将其放在一个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，而不是内联样式。

在React中渲染状态元素

1 个答案: