Есть ли в React элемент вродеvue, который предназначен только для упаковки материалов, но не имеет истинного влияния на структуру HTML? - PullRequest
Новая
       21

Есть ли в React элемент вродеvue, который предназначен только для упаковки материалов, но не имеет истинного влияния на структуру HTML?

1 голос
/ 29 сентября 2019

У меня проблема с условным рендерингом React в эти дни.Как все мы знаем, когда мы используем условный рендеринг, чтобы определить, будут ли отображаться некоторые элементы или нет. Нам нужно обернуть эти элементы <div/> или чем-то еще, чтобы убедиться, что каждое условие возвращает только один объект.Но очевидно, что обертка действительно оказывает некоторое влияние на структуру html, что не очень хорошо для нас, особенно когда мы создаем список или что-то еще.

Поэтому мой вопрос заключается в том, как использовать условный рендеринг, но у него нетструктурные эффекты на HTML?У React есть что-то похожее с <template/> в Vue или есть другие способы решить эту проблему?

Спасибо всем!:) 

          <Row>
             {customerClass === '6' ? (
                <div>
                  <Col span="8">
                    <FormItem {...formItemLayout} label="">
                      {getFieldDecorator('businessUnitName', {
                        rules: [
                          { required: true, message: '' },
                          {
                            validator: this.checkBusinessUnitName,
                          },
                        ],
                      })(<Input placeholder="" />)}
                    </FormItem>
                  </Col>
                  <Col span="8">
                    <FormItem {...formItemLayout} label="">
                      {getFieldDecorator('businessUnitAddress', {
                        rules: [{ required: true, message: '' }],
                      })(<Cascader options={storage.get('addressData')} placeholder="" showSearch />)}
                    </FormItem>
                  </Col>
                  <Col span="8">
                    <FormItem {...formItemLayout} label="">
                      {getFieldDecorator('businessUnitAdd', {
                        rules: [
                          { required: true, message: '' },
                          { whitespace: true, message: '' },
                          {
                            validator: this.checkBusinessUnitAdd,
                          },
                        ],
                      })(<Input placeholder="" />)}
                    </FormItem>
                  </Col>
                </div>
              ) : null}
              {['1', '2', '3', '4'].includes(customerClass) ? (
                <Col span="8">
                  <FormItem {...formItemLayout} label="">
                    {getFieldDecorator('shareholdingRatio', {
                      rules: [
                        {
                          required: true,
                          message: '',
                        },
                        {
                          validator: this.checkShareholding,
                        },
                      ],
                    })(<Input placeholder="" addonAfter="%" />)}
                  </FormItem>
                </Col>
              ) : null}
              {['1', '2', '3', '4', '5'].includes(customerClass) ? (
                <Col span="8">
                  <FormItem {...formItemLayout} label="">
                    {getFieldDecorator('businessLicenceCode', {
                      rules: [
                        { required: true, message: '' },
                        { whitespace: true, message: '' },
                        { len: 18, message: '' },
                      ],
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>
              ) : null}
              {['1', '2', '3', '4'].includes(customerClass) ? (
                <div>
                  <Col span="8">
                    <FormItem {...formItemLayout} label="">
                      {getFieldDecorator('registeredCapital', {
                        rules: [
                          {
                            required: true,
                            message: '',
                          },
                          {
                            // validator: this.checkCapital,
                            pattern: REG_UPTO_TEN_CHAR,
                            message: '',
                          },
                        ],
                      })(<Input placeholder="" addonAfter="" />)}
                    </FormItem>
                  </Col>
                  <Col span="8">
                    <FormItem {...formItemLayout} label="">
                      {getFieldDecorator('paiclUpCapital', {
                        rules: [
                          {
                            required: true,
                            message: '',
                          },
                          {
                            // validator: this.checkCapital,
                            pattern: REG_UPTO_TEN_CHAR,
                            message: '',
                          },
                        ],
                      })(<Input placeholder="" addonAfter="" />)}
                    </FormItem>
                  </Col>
                </div>
              ) : null}
              {['1', '2', '3', '4', '5', '6'].includes(customerClass) ? (
                <Col span="8">
                  <FormItem {...formItemLayout} label="">
                    {getFieldDecorator('employeesNum', {
                      rules: [{ required: true, message: '' }],
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>
              ) : null}
            </Row>

Я выбрал некоторый код из моего личного проекта, в котором в качестве пользовательского интерфейса используется Ant Design. Когда я использую <div/>, чтобы выполнять обтекание при условном рендеринге, эти элементы <Col> выглядят каккак беспорядок, потому что они не в порядке на странице. Можете ли вы помочь мне с этим?

1 Ответ

1 голос
/ 29 сентября 2019

Похоже, вы, вероятно, ищете фрагменты.Это позволит вам возвращать несколько элементов без необходимости оборачивать их в div и т. Д.

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}
...