javascript - 如何避免在 React 中重复 JSX/HTML 代码？

Question

我正在react.js 中构建UI，并希望改进我的JSX/HTML 代码以使其更小。

目前我的 JSX 代码大约需要 70 行代码。

这就是我正在构建的:

我的问题之一是在某些句子中一个或多个单词需要更粗。

我想以比下面实现的代码更好的方式解决这个问题。

请在下面找到我的代码 HTML/JSX:

    <div className="search-help" ref={(node) => this.setWrapperRef(node)}>
        <div className="search-help-content">
          <div className="search-help-header">
            <p>Use Specific Keywords for smarter filtering - English only</p>
          </div>
          <div className="search-help-sections">
            <div className="search-help-left-content">
              <p className="search-help-section-title">Logical Operator</p>
              <ul className="search-help-list">
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">
                    AND
                    <span className="search-help-label-sub">
                      "TX Group" <b>AND</b> "Latest News"
                    </span>
                  </p>
                </li>
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">
                    NOT
                    <span className="search-help-label-sub">
                      "Pochettino" <b>NOT</b> "Mourinho"
                    </span>
                  </p>
                </li>
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">
                    OR
                    <span className="search-help-label-sub">
                      "Cristobal Huet" <b>OR</b> "Nico Hischier"
                    </span>
                  </p>
                </li>
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">
                    ( )
                    <span className="search-help-label-sub">
                      <b>(</b>"Jeff Bezos" <b>OR</b> "Bill Gates" <b>OR</b>
                      <b>(</b> "Jack Dorsey"<b>)</b> <b>AND</b> <b>(</b>"Climate Change"<b>)</b>
                    </span>
                  </p>
                </li>
              </ul>
            </div>
            <div className="search-help-right-content">
              <p className="search-help-section-title">Language</p>
              <ul className="search-help-list">
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">lang:de</p>
                </li>
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">lang:eng</p>
                </li>
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">lang:fr</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

有什么建议或想法吗？

Answer 1

似乎正在提取您的 <li>进入一个组件可能是一个好的开始。构建一个组件，例如 MyListItem并提取那里的所有重复代码。实际的唯一文本将通过 props 传递到那里。

要将不同的文本位传递到不同的位置，您可以使用不同的 Prop ，如下所示:

<li className="search-help-label-spacing">
  <p className="search-help-label-main">
    {this.props.binaryOperator}
    <span className="search-help-label-sub">
      "{this.props.string1}" <b>{this.props.binaryOperator}</b> "{this.props.string2}"
    </span>
  </p>
</li>