Question

我正在根据JSON动态创建多个复选框输入：

class App extends Component {
    state = {
        data: codes,
        current: {}
    };

    render() {
        let data = this.state.data.map((code) => {
            return (
                <div className="form-part">
                    <h3>{code.title}</h3>
                    {(function () {
                        return code.options.map(option => <label><input type="checkbox" value={option.code}/>{option.label}</label>);
                    })()}
                </div>
            );
        });

        return (
            <div className="App">
                <form>{data}</form>
            </div>
        );
    }
}

问题在于所有生成的输入都在一行中，我希望它们位于彼此的下方（有关视觉解释，请参见下面的代码段）。我不能只在末尾添加<br />，因为那不是有效的JSX。将整个内容和<br>封装在<div></div>中可能会起作用，但看起来像是骇客。在React中应该怎么做？

当前输出：

<div class="form-part">
  <h3>Numbers</h3><label><input type="checkbox" value="1">One</label><label><input type="checkbox" value="2">Two</label><label><input type="checkbox" value="3">Three</label>
</div>

所需的输出：

<div class="form-part">
  <h3>Numbers</h3>
  <label><input type="checkbox" value="1">One</label>
  <br>
  <label><input type="checkbox" value="2">Two</label>
  <br>
  <label><input type="checkbox" value="3">Three</label>
</div>

Answer 1

仅在存在实际换行符时才使用换行符。在您的情况下，由于您将所有内容都包装在<label>标签内，因此请将该标签制作为块级显示，并在底部留一些空白。

我真的建议您使用以下CSS，而不是随意插入<br />标签。

.form-part label {
  display: block;
  margin: 10px 0 0;
}

<div class="form-part">
  <h3>Numbers</h3>
  <label><input type="checkbox" value="1">One</label>
  <label><input type="checkbox" value="2">Two</label>
  <label><input type="checkbox" value="3">Three</label>
</div>

反应码

class App extends React.Component {
  state = {
    data: [
      {
        title: "Hi",
        options: [
          { code: "Option 1", label: "Option 1" },
          { code: "Option 2", label: "Option 2" },
          { code: "Option 3", label: "Option 3" }
        ]
      }
    ],
    current: {}
  };

  render() {
    let data = this.state.data.map(code => {
      return (
        <div className="form-part">
          <h3>{code.title}</h3>
          {code.options.map(option => (
            <label>
              <input type="checkbox" value={option.code} />
              {option.label}
            </label>
          ))}
        </div>
      );
    });

    return (
      <div className="App">
        <form>{data}</form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.form-part label {
  display: block;
  margin: 10px 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如果您仍然需要添加<br />，我将为您提供代码：

class App extends React.Component {
  state = {
    data: [
      {
        title: "Hi",
        options: [
          { code: "Option 1", label: "Option 1" },
          { code: "Option 2", label: "Option 2" },
          { code: "Option 3", label: "Option 3" }
        ]
      }
    ],
    current: {}
  };

  render() {
    let data = this.state.data.map(code => {
      return (
        <div className="form-part">
          <h3>{code.title}</h3>
          {code.options.map(option => (
            <React.Fragment>
              <br />
              <label>
                <input type="checkbox" value={option.code} />
                {option.label}
              </label>
            </React.Fragment>
          ))}
        </div>
      );
    });

    return (
      <div className="App">
        <form>{data}</form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

但是请记住，以上内容不应用于您当前正在做的布局目的，并且在语义上是不正确的。

Answer 2

我会在CSS中使用flex来做到这一点。您可以将所有输入放入div中，为该div提供ID或类名，然后将display设置为flex，将flex-direction设置为column。

#inputs {
  display: flex;
  flex-direction: column;
}

<div class="form-part">
  <h3>Numbers</h3>
  <div id='inputs'>
    <label><input type="checkbox" value="1">One</label>
    <label><input type="checkbox" value="2">Two</label>
    <label><input type="checkbox" value="3">Three</label>
  </div>
</div>

您可以在此处了解有关flex的全部信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

输入后换行

2 个答案: