자식에서 Reastjs에서 루트로 데이터를 쉽게 전달하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com//questions/22004136

  •  20-12-2019
  •  | 
  •  

문제

이와 같은 코멘트 상자가 있습니다 :

여기에 이미지 설명을 입력하십시오

나는 모든 동작을 코멘트 박스 컴포넌트에 바인딩하고, 각 주석에서 Delete 이벤트를 처리하는 데 필요한 큐 테크 테이크 조치가있다.

delete의 Comment의 commentId의 Comment를 클릭하여 CommentList에 CommentBox로 전달 한 다음 CommentBox update 주석 데이터를 업데이트하고 주석 목록에서 해당 주석을 제거하고 주석 목록을 다시 렌더링합니다.

여기에 몇 가지 코드가 있습니다 : 

var Comment = React.createClass({
    handleDel: function() {
        var cid = this.props.cid;
        this.props.onDel(cid);
        return false;
    },

    render: function() {
        return (
            <div key={this.props.cid}>
              <a onClick={this.handleDel}>Del</a>
            </div>
        );
    }
});


var CommentList = React.createClass({
    handleDel: function(cid) {
        this.props.onDel(cid);
    },

    render: function() {
        var commentNodes = this.props.data.map(function(c) {
            return <Comment cid={c.id} onDel={this.handleDel} />
        }.bind(this));
        return (
            <div className="comments">
                {commentNodes}
            </div>
        )
    }
});


var CommentBox = React.createClass({

    ... ...

    delComment: function (cid){
        function del(data) {
            $.ajax({
                url: url,
                type: 'delete',
                dataType: 'json',
                data: data,
                success: function (e) {
                    if (e.retcode === 0) {
                        that.setState({
                            data: e.data
                        });
                    } else {
                        alert(e.error);
                    }
                }
            });
        }

        if (window.confirm('You Sure ？')) {
            del();
        }
    },

    ... ...

})
.

이 과정이 너무 자세 해!이 작업을 수행하는 쉬운 방법이 있습니까?

도움이 되었습니까?

해결책

핸들러의 부분 적용을 할 수도 있습니다. 

<Comment onDel={this.handleDel.bind(null, c.id)} />
.

this.handleDel가 호출되면 c.id가 첫 번째 인수로 전달됩니다.CommentList.handleDel를 제거하고

를 수행하여 단축 할 수도 있습니다. 
<Comment onDel={this.props.onDel.bind(null, c.id)} />
.

이 항목에 대한 정보가 좀 더 자세히보기 구성 요소 간 통신 반응 문서에서.

다른 팁

소품이 전달 된 모든 구성 요소에서 사용할 수있는 글로벌 응용 프로그램 상태를 관리하려고 할 수 있습니다.

응용 프로그램 상태의 모든 변경 사항에 대해 다시 렌더링 할 수 있습니다. 최상위 구성 요소에서 Rerender로서 shouldComponentUpdate로 최적화하려고 할 수 있습니다.그러나 나는 그것이 큰 응용 프로그램에 대해 관리 할 수 있는지를 테스트하지 않았습니다. 그러나

또한 OM 불변의 데이터 구조를 사용하여 shouldComponentUpdate를 최적화하고 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top