React.js에서 리치 데이터 구조 편집

React.js에서 리치 데이터 구조 편집

데이터 구조용 단순한 그리드 기반 에디터를 작성하려고 하는데 React.js에 몇 가지 개념적인 문제가 있습니다.그 문서에는 별로 도움이 되지 않기 때문에, 여기 계신 분이 도와주셨으면 합니다.

첫째, 외부 구성 요소에서 내부 구성 요소로 상태를 전환하는 올바른 방법은 무엇입니까?내부 구성 요소의 상태 변화가 외부 구성 요소까지 "거품"으로 발생할 수 있습니까?

둘째, 두 개의 분리된 구성요소가 데이터를 공유하여 다른 구성요소에서 돌연변이를 볼 수 있습니까?

다음에, 내가 하고 싶은 일의 종류(JSFIDle 버전)의 간단한 예를 나타냅니다.

나는 가지고 있다company배열을 포함한 물체employee물건들.나는 이 모든 것들을 배치하고 있습니다.employee편집 가능한 그리드에 나열됩니다.버튼을 클릭하면 결과가 표시됩니다.company개체와 모든 돌연변이(콘솔에 쓰기)를 지정합니다.

/** @jsx React.DOM */

var Cell = React.createClass({
    getInitialState: function () {
        return {data: ""};
    },

    componentWillMount: function () {
        this.setState({data: this.props.data});
    },
    onChange: function (evt) {
        console.log(this.state, evt.target.value);
        this.setState({data: evt.target.value});
    },
    render: function () {
        var data = this.props.data;
        return <input value={this.state.data} onChange={this.onChange} />
    }
});

var Row = React.createClass({
    render: function () {
        return (<div className="row">
            <Cell data={this.props.data.name} />
            <Cell data={this.props.data.location} />
            <Cell data={this.props.data.phone} />
        </div>);
    }
});

var Grid = React.createClass({
    render: function () {
        var rows = this.props.data.map(function (rowData, index) {
            return <Row key={index} data={rowData}>Row</Row>;
        });
        return <div className="table">{rows}</div>;
    }
});

var Button = React.createClass({
    getInitialState: function () {
        return {data: {}}
    },
    componentWillMount: function () {
        this.setState({data: this.props.data});
    },
    onClick: function () {
        console.log(this.state);
    },
    render: function () {
        return <button onClick={this.onClick}>Update</button>;
    }
});

var company = {
    name: "Innotech",
    employees: [
        {id: "1", name: "Peter", location: "IT", phone: "555-1212"},
        {id: "2", name: "Samir", location: "IT", phone: "555-1213"},
        {id: "3", name: "Milton", location: "loading dock", phone: "none"}
    ]
};


React.renderComponent(
    <div><Grid data={company.employees} /><Button data={company} /></div>,       
    document.getElementById('employees')
);

지금 리액트에서 가장 문서화된 부분인 것 같아요컴포넌트 간의 커뮤니케이션 방법은 부모 간에 커뮤니케이션할 때 소품을 간단하게 설정하고 자녀 간에 커뮤니케이션할 때 소품을 통해 콜백을 전달하는 것입니다.

형제 구성 요소 간에 데이터를 공유하려면 상태를 관리하고 두 구성 요소 모두에 전달하는 상위 구성 요소가 있어야 합니다.대부분의 경우 상태는 컴포넌트 계층의 맨 위에 있어야 하며 각 정보는 최대 1개의 컴포넌트 상태에 있어야 합니다.

이에 대한 자세한 내용은 Pete Hunt의 블로그 게시물 Thinking in React를 참조하십시오.

---

이 점을 염두에 두고 바이올린을 업데이트했습니다.

나는 변했다Grid따라서 자체 상태를 유지하는 것이 아니라 소품을 통해 전달된 데이터를 항상 표시하고 호출할 수 있습니다.onCellChange데이터의 변경을 요구하고 싶을 때, 그 소품으로부터 정보를 입수합니다.(The Teledge Base)Grid컴포넌트는 상위 컴포넌트의 그리드 업데이트를 예상합니다.data수정한 데이터로 지지합니다.부모가 거부하면(아마도 데이터 검증에 실패했거나 유사한 이유로), 읽기 전용 그리드가 됩니다.

그리고 제가 새로 만든 것도 알 수 있을 겁니다.Editor그리드 및 해당 형제 단추를 래핑하는 구성 요소.그Editor컴포넌트는 기본적으로 전체 페이지를 관리합니다.실제 앱에서는 그리드의 컨텐츠가 다른 곳에 필요하기 때문에 상태가 더 높아질 수 있습니다.나는 너의 것을 제거했다.Button는 네이티브를 입니다.<button>는 떠났습니다; 나는 떠났습니다; 태그;Cell될 수 Row 쓸 수 <input>직접 태그를 붙입니다.

이게 말이 됐으면 좋겠어요.궁금한 게 있으면 언제든지 물어보세요.이 문제에 대해 더 많은 이야기를 나누고 싶다면 보통 #reactjs IRC 룸에 사람들이 있습니다.

리액트에 대해 알아보고 있습니다.JS 지난 일주일 정도.질문에 대한 제 의견은 새로운 질문입니다. Cell 컴포넌트와 Row and Grid 컴포넌트를 분리하는 이유는 무엇입니까?

Cell & Row & Grid는 Backbone 배경에서 나온 것으로, 각각의 Cell Backbone을 세밀하게 제어할 수 있습니다.뷰. 단, 세밀한 제어와 DOM 갱신은 ReactJS가 해결하려고 하는 것 같습니다.이것은 Row/Cell을 내부에 실장하는 그리드 컴포넌트를 가지고 있는 것을 의미합니다.

var Grid = React.createClass({
    onChange: function(evt, field) {
        this.props.data[field] = evt.target.value;
    },

    render: function () {
        var rows = this.state.data.map(function (rowData, index) {
            return (
                <div className="row" key={index}>
                    <input value={rowData.name} onChange={this.onChange.bind(null, "name")} />
                    <input value={rowData.location} onChange={this.onChange.bind(null, "location")} />
                    <input value={rowData.phone} onChange={this.onChange.bind(null, "phone")} />
                </div>
            );
        });

        return <div className="table">
                   {rows}
               </div>;
    }
});

(on*핸들링 변경, 개선의 여지가 있음)은 무시해 주세요.테스트되지 않은 코드)

문제는 셀이나 행을 다른 곳에서 개별 컴포넌트로 재사용할 수 있느냐는 것입니다.내가 보기에 대답은 "아주 가능성이 높다"이다.이 경우 위의 솔루션인 IMHO는 데이터를 주고받는 문제를 제거하고 위아래로 변화합니다.

상위 구성 요소가 의미가 없는 경우 형제 구성 요소 간에 데이터를 공유하는 또 다른 방법은 구성 요소 간에 이벤트를 사용하는 것입니다.예를 들어 Backbone을 사용할 수 있습니다.이벤트, Node.js Emitter가 브라우저 또는 유사한 lib에 포트되었습니다.반응성 스트림을 선호하는 경우 Bacon.js를 사용할 수도 있습니다.Bacon.js와 React.js의 조합에 대한 훌륭하고 간단한 예가 여기 있습니다.http://joshbassett.info/2014/reactive-uis-with-react-and-bacon/

언급URL : https://stackoverflow.com/questions/20795323/editing-a-rich-data-structure-in-react-js