홈>2020-02-01 01:21

reactjs - Reactrender () 내부에 여러 요소를 반환

새로운 반응을 보였으며이 문제가 발생했습니다 :

render: function(){
    return (
        <h3>Account</h3>
        <a href="#" onClick={some_event}>Login</a>
        <a href="#" onClick={some_event}>Logout</a>
)}

이처럼 렌더링 할 때 multiple components must wrapt with end 와 같은 오류가 발생합니다.

각 html 태그 또는 각 줄에 대해 하나의 componenet을 만들어야합니까, 아니면 그런 식으로 렌더링 할 수 있습니다.

모든 제안?

reactjs

답변 # 1
Reactrender 메소드는 단일 루트 노드 만 렌더링 할 수 있습니다. (업데이트 :v16에서 변경되었습니다 (아래 참조)). 귀하의 경우에는 3 개의 노드를 반환합니다. 이 문제를 해결하려면 3 개의 노드를 단일 루트 노드로 래핑 할 수 있습니다.
```
render: function(){
  return (
    <div>
      <h3>Account</h3>
      <a href="#" onClick={some_event}>Login</a>
      <a href="#" onClick={some_event}>Logout</a>
    </div>
)}
```
React v16에서는 render() 가 가능합니다. 요소 배열을 반환합니다.

다른 배열과 마찬가지로 주요 경고를 피하려면 각 요소에 키를 추가해야합니다.
```
render() {
  return [
    <ChildA key="key1" />,
    <ChildB key="key2" />,
    <ChildC key="key3" />,
  ];
}
```
또 다른 옵션은 조각을 사용하는 것입니다. 조각을 사용하면 DOM에 추가 노드를 추가하지 않고도 하위 목록을 그룹화 할 수 있습니다.
```
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}
```
짧은 문법도 있습니다 ( <> ) 조각 선언 :
```
render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}
```

답변 # 2

쉼표로 구분 된 요소 배열을 반환합니다.

render: function(){
  return ([
    <h3>Account</h3>,
    <a href="#" onClick={some_event}>Login</a>,
    <a href="#" onClick={some_event}>Logout</a>
  ])
}

답변 # 3

React 16.2+의 조각에 다음 구문을 사용할 수 있습니다 :

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

답변 # 4

React.render는 DOM 요소를 반환하는 JavaScript 함수입니다. JavaScript에서 함수는 여러 표현식을 리턴 할 수 없으므로 React에서 여러 요소를 리턴 할 수 없습니다. 이 함수는 "return"키워드 바로 다음에 첫 번째 표현식을 반환 한 다음 함수가 종료됩니다. 이것이 우리가 이것을 할 수있는 이유입니다 :

if (1) { 1을 반환 } return 2

답변 # 5

몇 가지 옵션이 있습니다 :
<올>
어떤 <div></div> 에 그것을 마무리 또는 <section></section> . 와이즈 비즈 단일 요소를 반환해야합니다.

분할 할 수 있고 render() 에서 더 잘되고 좋은 전용 로직을 구현하는 여러 구성 요소를 가질 수 있습니다.
React

Python2.net

reactjs - Reactrender () 내부에 여러 요소를 반환

관련 자료