대응: 검증DOMNesting: #text는 다음 자식으로 표시할 수 없습니다.

대응: 검증DOMNesting: #text는 다음 자식으로 표시할 수 없습니다.

왜 리액션 쇼 경고인지 설명해 주시겠어요?Warning: validateDOMNesting(...): #text cannot appear as a child of <tr>. See Router > RouterContext > CarWashPage > AllCarWashTable > tr > #text.태그 안에 텍스트가 없습니다.tr

테이블을 렌더링하는 코드

export default class AllCarWashTable extends React.Component{

constructor(props) {
    super(props);
    this.generateHeaders = this.generateHeaders.bind(this);
    this.generateRows = this.generateRows.bind(this);
};

static propTypes = {
    cols : React.PropTypes.array.isRequired,
    rows : React.PropTypes.array.isRequired
}

generateHeaders() {
    let cols = this.props.cols;  // [{key, label}]
    return cols.map(function(colData) {
        return <th key={colData.key}> {colData.label} </th>;
    });
}

generateRows() {
    let cols = this.props.cols,  // [{key, label}]
        data = this.props.rows;
    if (this.props.rows.length > 0) {
        return data.map(function(item) {
            var cells = cols.map(function(colData) {
                return <td key={colData.key}> {item[colData.key]} </td>;
            });
            return <tr key={item.id}> {cells} </tr>;
        });
    }
}

render(){
    let headers = this.generateHeaders();
    let rows = this.generateRows();

    return (
         <table className="table table-hove">
             <thead>
                <tr>
                    {headers}
                </tr>
             </thead>
             <tbody>
                    {rows}
             </tbody>

         </table>
    )
}
}

마지막으로 제 테이블은 다음과 같은 구조로 되어 있습니다.

어디가 문제입니까?

문제는 다음 행의 공간입니다.

return <tr key={item.id}> {cells} </tr>;

우습게 보일 수도 있지만 실제로는 셀과 공백(텍스트)을 렌더링하고 있습니다.다음과 같이 표시됩니다.

return <tr key={item.id}>{cells}</tr>;

논리 AND 단락을 사용하는 경우에도 이 문제가 발생합니다.&&조건부 행을 표시하거나 숨기려면:

{
  foo && (<tr><td>{foo}</td></tr>)
}

그것을 삼진법으로 바꾸다.a ? b : c여기서 c는null고쳐줄거야

{
  foo ? (<tr><td>{foo}</td></tr>) : null
}

내 경우, 는 비어 있었다.''출력(내부 공간 없음)

<tbody>
  {this.props.orders.map(
    order =>this.props.selectedAgent === order.agent ? 
      <Row item={order} key={ order._id } /> : ''
    )
  }
</tbody>

null은 다음과 같은 기능을 합니다.

<tbody>
  {this.props.orders.map(
    order =>this.props.selectedAgent === order.agent ? 
      <Row item={order} key={ order._id } /> : null
    )
  }
</tbody>

내 경우에는 받아들여진 답이 근본적인 원인이 아니었다.제가 댓글 달았을 때도 같은 경고를 받았어요.<th>태그입니다. 댓글을 지우자 경고가 사라졌어요.

const TableHeaders = (props) => (
  <tr>
    <th>ID</th> {/* TODO: I had a comment like this */}
  </tr>
)

편집: 간격 제거</th>그리고.{/*효과도 있습니다.

A <tr>HTML 태그는 테이블 행을 나타냅니다.따라서 테이블 행 안에 표시할 텍스트는 모두 안에 배치해야 합니다.<td>HTML 태그그러면 오류가 제거됩니다.

예:

return (
    <tr>
        <td> {/* Using <td> inside <tr> */}
            Hello World!
        </td>
    </tr>
);

통지 경고:validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>소스 코드의 각 행에 있는 태그 사이에 여분의 공백이 없는 것을 확인합니다.이 경우 initialize 변수는 다음과 같이 되어서는 안 됩니다.null.

 let elementCart = ''; {/* in the here,warning will append  */}
    if(productsCart.length > 0){
        elementCart = productsCart.map((item, index) => {
            return <CartItem item={item} key={index} index={index} />
        });
    }

    return(
        <tbody id="my-cart-body">
            {elementCart}
        </tbody>
    )

솔루션:let elementCart = null;

React의 Material UI에서 이 오류나 이와 유사한 공백 오류가 발생할 경우를 대비해서, 코드를 해독한 후 몇 시간 동안 내 해결책은 테이블 안에 있는 간단한 javascript 코멘트였습니다.

 { /*  sortable here */ }

테이블 엘리먼트 사이에서 그것을 제거하자 경고가 사라졌습니다.

다음 사항을 확인합니다.let그렇지 않으면 빈 배열을 새로 초기화합니다.

{headers ? headers : []}

or

{rows || []}

저에게는 마법처럼 작용합니다...

render(){
    let headers = this.generateHeaders();
    let rows = this.generateRows();

    return (
         <table className="table table-hove">
             <thead>
                <tr>
                    {headers ? headers : []}
                </tr>
             </thead>
             <tbody>
                    {rows || []}
             </tbody>

         </table>
    )
}

또한.|| null해결할 수 있다. 중요한 것은 그 가치가''

Kevin Law(다른 코멘트에서)는 다음과 같이 할 수 있다고 말했습니다.

{
  foo ? (<tr><td>{foo}</td></tr>) : null
}

그러나 다음과 같이 수정할 수도 있습니다.

{
  Boolean(foo) && <tr><td>{foo}</td></tr>
}

댓글 지우는 것도 도움이 되고

내 경우 변수를 " 대신 null로 초기화하면 정상적으로 작동합니다.

@Jarno의 답변에 덧붙여, 이 문제도 있었습니다.추가 정보가 없는지 다시 한 번 확인합니다.}또는{javascript 코드 종료 시:

{this.props.headers.map(header => <th key={header}>{header}</th>)}}
                                                                  ↑

이 경고는 제가 괄호 대신 괄호를 넣었을 때 받았습니다.

<table>
  <tbody>
    <tr>
      (showMsg && <td>Hi</td>} // leading '(' should be a '{'
    </td>
  </tbody>
</table>

이를 받은 은 제가 이 때 입니다.<tr>「」가 <td>. 가 본문을 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ로 했습니다.<td>이치노

이 작업을 수행할 때는 텍스트에 공백이 있거나 {}을(를) 사용해도 문제가 되지 않았습니다.

저 같은 경우에는 정말...<tr> a <tr>가 있습니다)<td> :) :) :)

찾기가 아주 쉬워요.검사를 열고 태그를 찾으십시오.태그의 선두 또는 말미에는 다음과 같이 따옴표로 둘러싸인 문자열이 표시됩니다.

테이블 본문 태그에 예기치 않은 요소를 전달하면 안 됩니다.tr과 td를 사용해야 합니다.

행에 tr과 td가 포함된 요소가 반환됩니다.

{rows}

뭐랄까

return(
    <tr>
        <td> 
            Hello
        </td>
    </tr>
)

제 경우 SQL 쿼리를 업데이트하여 업데이트된 열 이름을 포함하는 것을 잊어버렸기 때문에 이 오류가 발생했습니다.원래 쿼리가 존재하지 않는 열에 액세스하려고 했습니다.

이 쿼리는 Nextjs, React, Material UI에서 사용되었으며 Postgre로 전송되었습니다.테이블에서 데이터베이스 정보를 포함하는 MUI 프런트 엔드 테이블을 로드하기 위한 SQL 서버.

쿼리를 업데이트하면 문제가 수정되었습니다.

언급URL : https://stackoverflow.com/questions/39914455/react-validatedomnesting-text-cannot-appear-as-a-child-of-tr