React.js에서 하위 렌더링 트리거

React.js에서 하위 렌더링 트리거

부모(MyList이 예에서는 컴포넌트가 아이 ()를 통해 어레이를 렌더링합니다.MyComponent컴포넌트).부모가 어레이의 속성을 변경하기로 결정했습니다. 하위 렌더링을 트리거하는 React 방법은 무엇입니까?

제가 생각해낸 건this.setState({});데이터를 조정한 후 부모로 이동합니다.이것은 업데이트를 트리거하는 해킹 방식입니까, 아니면 리액트 방식인가요?

JS Fielle: https://jsfiddle.net/69z2wepo/7601/

var items = [
  {id: 1, highlighted: false, text: "item1"},
  {id: 2, highlighted: true, text: "item2"},
  {id: 3, highlighted: false, text: "item3"},
];

var MyComponent = React.createClass({
  render: function() {
    return <div className={this.props.highlighted ? 'light-it-up' : ''}>{this.props.text}</div>;
  }
});

var MyList = React.createClass({
  toggleHighlight: function() {
    this.props.items.forEach(function(v){
      v.highlighted = !v.highlighted;
    });

    // Children must re-render
    // IS THIS CORRECT?
    this.setState({});
  },

  render: function() {
    return <div>
      <button onClick={this.toggleHighlight}>Toggle highlight</button>
      {this.props.items.map(function(item) {
          return <MyComponent key={item.id} text={item.text} highlighted={item.highlighted}/>;
      })}
    </div>;
  }
});

React.render(<MyList items={items}/>, document.getElementById('container'));

여기서의 문제는 당신이 상태를 저장하고 있다는 것입니다.this.props대신this.state이 컴포넌트는 변이하고 있기 때문에items,items상태이며 저장해야 합니다.this.state(여기 소품 대 주에 대한 좋은 기사가 있습니다.)이렇게 하면 렌더링 문제가 해결됩니다.items전화할 것이다setState이 명령어는 자동으로 재검출을 트리거합니다.

소품 대신 스테이트를 사용하는 컴포넌트는 다음과 같습니다.

var MyList = React.createClass({
    getInitialState: function() {
        return { items: this.props.initialItems };
    },

    toggleHighlight: function() {
        var newItems = this.state.items.map(function (item) {
            item.highlighted = !item.highlighted;
            return item;
        });

        this.setState({ items: newItems });
    },

    render: function() {
        return (
            <div>
                <button onClick={this.toggleHighlight}>Toggle highlight</button>
                { this.state.items.map(function(item) {
                    return <MyComponent key={item.id} text={item.text} 
                             highlighted={item.highlighted}/>;
                }) }
            </div>
        );    
    }
});

React.render( <MyList initialItems={initialItems}/>,
              document.getElementById('container') );

이름을 변경한 것에 주의해 주세요.items을 지지하다.initialItems왜냐하면 그것은 분명히 하기 때문이다.MyList돌연변이를 일으킬 거야이 방법은 매뉴얼에서 권장하고 있습니다.

갱신된 바이올린을 보실 수 있습니다.https://jsfiddle.net/kxrf5329/

리액트 훅으로 리렌더 키 속성을 활용한 좋은 솔루션을 찾았습니다.하위 컴포넌트 또는 React 컴포넌트 일부의 키 속성을 변경하면 해당 컴포넌트는 완전히 재렌더됩니다.하위 구성 요소를 다시 렌더링하는 반응 구성 요소의 일부를 다시 렌더링해야 할 때 사용합니다.여기 예가 있습니다.전체 구성 요소를 다시 렌더링합니다.

import React, { useState, useEffect } from "react";
import { PrEditInput } from "./shared";

const BucketInput = ({ bucketPrice = [], handleBucketsUpdate, mood }) => {
  const data = Array.isArray(bucketPrice) ? bucketPrice : [];
  const [state, setState] = useState(Date.now());
  useEffect(() => {
    setState(Date.now());
  }, [mood, bucketPrice]);
  return (
    <span key={state}>
      {data.map((item) => (
        <PrEditInput
          key={item.id}
          label={item?.bucket?.name}
          name={item.bucketId}
          defaultValue={item.price}
          onChange={handleBucketsUpdate}
          mood={mood}
        />
      ))}
    </span>
  );
};

export default BucketInput;

하위 렌더를 다시 렌더링하는 쉬운 옵션은 렌더가 필요할 때마다 고유한 키 속성을 업데이트하는 것입니다.

<ChildComponent key={this.state.updatedKey}/>

콜을 통해 재렌더링을 트리거해야 합니다.setState()전파하고 싶은 새로운 소품을 선물하는 거죠.업데이트를 강제하고 싶은 경우에는forceUpdate().

이 페이지의 예를 보면, 다음과 같은 것을 알 수 있습니다.setState는 업데이트 및 재실행 트리거에 사용되는 방식입니다.문서에도 그렇게 (아하!) 명기되어 있습니다.

당신의 경우, 제가 전화하겠습니다.forceUpdate.

편집: Jordan이 코멘트에서 언급했듯이 아이템을 주의 일부로 저장하는 것이 좋습니다.그렇게 하면 전화할 필요가 없어forceUpdate컴포넌트 상태를 실제로 업데이트 할 수 있습니다.따라서 일반 컴포넌트에서는setState값이 업데이트되면 더 잘 작동합니다.

하위 구성 요소에 숫자 키를 설정하고 작업이 수행되면 키 변경을 트리거할 수 있습니다.예

state = {
        childKey: 7,
};



<ChildComponent key={this.state.childKey}/>


actionToTriggerReload = () => {
const newKey = this.state.childKey * 89; // this will make sure the key are never the same
this.setState({childKey: newKey})
   }

그러면 Child Component가 다시 렌더링됩니다.

하위 구성 요소에 숫자 기본값 '키'를 설정하고 키 값만 변경하면 다시 렌더링할 수 있습니다.

this.state = {
        updatedKey: 1,
};    
triggerReload = () => {
let newKey = Math.floor(Math.random() * 100); // make sure the key are never the same
this.setState({updatedKey: newKey})
   }
<childComponent key={this.state.updatedKey} handlerProp = {this.onClickItemEvent} />

reactjs 클래스 베이스에서 Child Component를 다시 렌더링할 수 있었습니다.

언급URL : https://stackoverflow.com/questions/30034265/trigger-child-re-rendering-in-react-js