Я создаю таблицу в react (new to react), но CategoryData не создает ячейки правильно, то есть создает ячейки, которые не выровнены с <th>, которые исходят от родителя, и у них нет границ ячеек. вообще. Он также дает следующие предупреждения:

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>. See Param > tbody > Row > div.
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. See Row > div > tr.
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. See CategoryData > div > tr.

Я не уверен, почему появляются эти предупреждения и почему ячейки таблицы (из CategoryData) не выравниваются и не имеют границ ячеек. Как это сделать правильный ?

Код

var Param = React.createClass({

    getInitialState: function() {
        return {
            isLoading: true,
            panelTitle: "",
            data: [],
            categories: []
        }
    },

    updateState: function() {
        var that = this;
        var categories = new Set();
        rest.getParameters('service').then(function (results) {
            for (var i = 0; i < results.data.length; i++) {
                categories.add(results.data[i].category);
            }
            that.setState({
                data: results.data,
                categories: Array.from(categories)
            })
        }).catch(function (err) {
            console.error('rest.getParameters(): ', err);
            that.setState({
                isLoading: true,
                data: [],
                categories: []
            })
        });
    },

    componentDidMount: function() {
        this.updateState();
    },

    render: function() {
      return (
        <Panel className="panel-info" header={<h4 className="panel-title">Service Config</h4>}>
            <div>
                <table className="table table-striped table-bordered table-hover table-condensed table-responsive">
                    <thead>
                        <tr>
                            <th className="col-lg-2 text-center">AMP Name</th>
                            <th className="col-lg-2 text-center">Athena Name</th>
                            <th className="col-lg-2 text-center">Description</th>
                            <th className="col-lg-1 text-center">Default</th>
                            <th className="col-lg-1 text-center">Min Value</th>
                            <th className="col-lg-1 text-center">Max Value</th>
                            <th className="col-lg-1 text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.categories.map((category, index) =>
                            <th colSpan="7" key={index} style={{'textAlign':'left', 'paddingLeft':'5px', 'backgroundColor': '#D3D0CF'}}>{this.state.category}</th>
                            this.state.data.map((row, i) =>
                                if (row.category === category) {
                                    <tr key={i}>
                                        <td className="col-lg-2 text-center">{row.name}</td>
                                        <td className="col-lg-2 text-center">{row.alias}</td>
                                        <td className="col-lg-2 text-center">{row.description}</td>
                                        <td className="col-lg-1 text-center">{row.default_value}</td>
                                        <td className="col-lg-1 text-center">{row.min_value}</td>
                                        <td className="col-lg-1 text-center">{row.max_value}</td>
                                        <td className="col-lg-1 text-center">Action</td>
                                    </tr>
                                }
                            )  
                        )}
                    </tbody>
                </table>
            </div>
        </Panel>
    );
  }
});
14
ssss 27 Июл 2017 в 02:39
2
Ваши tr заключены в теги div.
 – 
Frank Fajardo
27 Июл 2017 в 02:46
2
У вас не может быть <div> внутри <table>, если он не является прямым потомком <td> или <th>. Ваш ребенок от <tbody>. Возможно, вы захотите переделать свой var Row, чтобы не отображать <div> как внешний содержащий элемент :)
 – 
Obsidian Age
27 Июл 2017 в 02:46
@ObsidianAge, а как переделать?
 – 
ssss
27 Июл 2017 в 02:52
1
... Просто удалите <div> со своего Row. Если вы хотите иметь <div>, вероятно, он хочет войти в Panel. Это зависит от того, какой вы хотите получить окончательную структуру. Но да, возвращать <div><tr>... в вашей строке определенно недопустимо :)
 – 
Obsidian Age
27 Июл 2017 в 02:56
@ObsidianAge, я думал удалить CategoryData, но не уверен, что мне добавить в рендер Row ..
 – 
ssss
27 Июл 2017 в 02:56

2 ответа

Я бы изменил 'th' на 'tr', потому что я уверен, что реакция выдаст вам предупреждение, если вы добавите 'th' внутри 'tbody'

let finalList = []
this.state.categories.forEach( (cat, index) => {
   finalList.push(<tr...>{this.state.category}</tr>)
   this.state.data.forEach( (row, index) => {
      if(row.category === cat){
         finalList.push(
             <tr key={i}>
                 <td className="col-lg-2 text-center">{row.name}</td>
                 <td className="col-lg-2 text-center">{row.alias}</td>
                 <td className="col-lg-2 text-center">{row.description}</td>
                 <td className="col-lg-1 text-center">{row.default_value}</td>
                 <td className="col-lg-1 text-center">{row.min_value}</td>
                 <td className="col-lg-1 text-center">{row.max_value}</td>
                 <td className="col-lg-1 text-center">Action</td>
             </tr>
          )
      }
   })
})

Слово предупреждения, я бы не стал использовать таблицы checkout css-сетки, они намного более гибкие и довольно хорошо поддерживаются.

3
David Villarreal 27 Июл 2017 в 06:04

РЕДАКТИРОВАТЬ: начиная с версии 16.0.0 и далее в React, вы можете использовать React.Fragment для возврата нескольких элементов из рендеринга.

<tbody>
    {
        this.state.categories.map((category, index) => {
            var innerData = this.state.data.map((row, i) => {
                if (row.category === category) {
                    return (
                        <tr key={i}>
                            <td className="col-lg-2 text-center">{row.name}</td>
                            <td className="col-lg-2 text-center">{row.alias}</td>
                            <td className="col-lg-2 text-center">{row.description}</td>
                            <td className="col-lg-1 text-center">{row.default_value}</td>
                            <td className="col-lg-1 text-center">{row.min_value}</td>
                            <td className="col-lg-1 text-center">{row.max_value}</td>
                            <td className="col-lg-1 text-center">Action</td>
                        </tr>
                    )
                }
                return null
            })

            return (
              <React.Fragment>
                <th colSpan="7" key={index} style={{
                    'textAlign': 'left',
                    'paddingLeft': '5px',
                    'backgroundColor': '#D3D0CF'
                }}>{this.state.category}</th>,
                {innerData}
              </React.Fragment>    
            )
        })
    }
    </tbody>

До версии 16

С помощью JSX syntactic sugar можно вернуть несколько элементов из компонента, записав их как элементы, разделенные запятыми, в массив, например

<tbody>
{
    this.state.categories.map((category, index) => {
        var innerData = this.state.data.map((row, i) => {
            if (row.category === category) {
                return (
                    <tr key={i}>
                        <td className="col-lg-2 text-center">{row.name}</td>
                        <td className="col-lg-2 text-center">{row.alias}</td>
                        <td className="col-lg-2 text-center">{row.description}</td>
                        <td className="col-lg-1 text-center">{row.default_value}</td>
                        <td className="col-lg-1 text-center">{row.min_value}</td>
                        <td className="col-lg-1 text-center">{row.max_value}</td>
                        <td className="col-lg-1 text-center">Action</td>
                    </tr>
                )
            }
            return null
        })

        return ([
            <th colSpan="7" key={index} style={{
                'textAlign': 'left',
                'paddingLeft': '5px',
                'backgroundColor': '#D3D0CF'
            }}>{this.state.category}</th>,
            [...innerData]
        ])
    })
}
</tbody>

Кроме того, когда вы используете операторы if в функции карты, вам необходимо иметь их вне оператора возврата, теперь, если вы выполняете {this.state.categories.map((category, index) => <tr>..., это означает, что все, что находится после стрелки, считается частью возврата и следовательно, оператор if внутренней карты выдаст вам ошибку.

Существует проблема на странице реакции github для возврата нескольких элементы. Прочтите его для получения более подробной информации.

2
Shubham Khatri 12 Дек 2018 в 13:15