javascript - 在 React 中渲染状态元素

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>

或者如果合适的话，使用多个 div 将它放在一个 td 中，因为它们默认为 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>

---

您现在已经说过您希望它们紧挨着您更改了，而不是在不同的行中。这更简单:只需将它们放在相同的 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，而不是内联样式。