React Stateless 구성 요소 : 출력 및 모양과 상호 작용

나는 이것에 대한 답을 찾아 보았다 – 내가이 질문 에서 가장 가까운 것을 찾았 지만 – 내 경우에는 상당한 차이가 있다고 생각한다 (자녀의 상태를 유지하는 부모에게 들어가기 시작한다는 사실은 ... ) 드디어 설명을 요청했습니다.

내가 의미하는 바에 대한 매우 간단한 예가 아래에 있습니다 (그리고 내가 요청하는 것을 더 잘 설명 할 것입니다).

다음과 같은 책 문서가 많다고 가정 해 보겠습니다.

bookList = [
{
  title: "book 1", 
  author: "bob", 
  isbn: 1, 
  chapters: [
{ chapterNum: 1, chapterTitle: "intro", chapterDesc: "very first chapter", startPg: 2, endPg: 23 }, 
{ chapterNum: 2, chapterTitle: "getting started", chapterDesc: "the basics", startPg: 24, endPg: 45 }
]},
{
 title: "book 2" ... }
]

따라서 매우 길 수 있고 축소 / 확장 될 수있는 문서 내에 포함 된 개체가 핵심입니다.

다음은 구성 요소를 보여주는 대략적인 코드 샘플입니다.

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            books: bookList,
            focusBook: null
        }
        this.updateDetailDiv = this.updateDetailDiv.bind(this);
    }

    updateDetailDiv(book) {
        this.setState(
            { focusBook: book}
        );
    }

    render() {
        return(
            <BookList 
                bookList = {this.state.books} 
                updateDetailDiv = { this.updateDetailDiv }
            />
            <BookDetail
                focusBook = { this.state.focusBook }
            />
        );
    }
}

const BookList = props => {
    return (
        props.bookList.map(item=>
            <li onClick={()=> props.updateDetailDiv(item)}> {item.title} </li>
            )
        );
}

const BookDetail = props => {
     return (
        <div className="bookDetails">
        { props.focusBook != null
        ? <div>
            {props.focusBook.title}, 
            {props.focusBook.author},
            {props.focusBook.isbn}
            Chapters:
            <div className="chapterList">
                { props.focusBook.chapters.map(item=>
                    <span onClick={()=>someFunction(item)}>{item.chapterNum} - {item.chapterName}</span>
                    )}
            </div>
            <div id="chapterDetails">
                This text will be replaced with the last clicked chapter's expanded details
            </div>
        </div>
        : <div>
            Select A Book
         </div> 
     })
}

someFunction(item) {
 document.getElementById('chapterDetails').innerHTML = `<p>${item.chapterDesc}</p><p>${item.startPg}</p><p>${item.endPg}</p>`;
}

그래서 내 문제는 부모 구성 요소로 전달하지 않고 기능적 상태 비 저장 구성 요소의 데이터에 대한 간단한 외형 / 시각적 변경을 처리하는 가장 좋은 방법이 무엇인지 잘 모르겠다는 것입니다. 많은 아이들이 자신의 자녀를 가질 때 발생합니다 (자녀가있을 수 있음)-> 모두 자신의 렌더링 옵션이 필요합니까? 예를 들어-여기서 App 구성 요소는 DetailDiv 구성 요소를 다시 렌더링합니다 (상태가 변경 되었기 때문에).하지만 App이 DetailDiv의 세부 div도 처리하고 싶지는 않습니다. 여기 내 예에서는 매우 간단하지만 작업중인 실제 응용 프로그램에는 한 번 App에서 렌더링 한 후 일반 JS에 의해 시각적으로 수정 될 수있는 2 ~ 3 개의 포함 된 항목 레이어가 있습니다.

그래서 내 예 someFunction()에서 각 챕터 목록에있는 것을 볼 수 있습니다. 별도의 간단한 '전통적인 JS DOM 함수'를 작성하여이 작업을 수행 할 수 있습니다 (예 : target.getElementById또는 closest()-하지만 그럴 필요는 없다고 생각합니다. React를 사용하는 동안 일반 JS를 사용하여 DOM을 조작합니다.

다시 요약하면, stateless 컴포넌트의 렌더링 된 출력에 대한 간단한 DOM 조작을 처리하는 가장 좋은 방법은 무엇입니까? 이를 자신의 클래스로 만드는 것은 과잉 인 것처럼 보이며 '부모'앱이 '손자'와 '증손자의 상태를 처리하는 것은 애플리케이션이 성장함에 따라 다루기 어려울 것입니다. 상태 저장 구성 요소의 레이어없이 이것을 처리하는 방법을 많이 보지 못했기 때문에 명백한 예제가 누락되었습니다.

명확성을 위해 편집 :

BookDetail 상태 비 저장 구성 요소입니다.

부모 상태 저장 구성 요소 ( App) 에서 개체를 소품으로 전달합니다.

때 App의 상태가 변경되면 그 변경 사항을 반영, 다시 렌더링됩니다.

BookDetail많은 데이터를 표시하는 책임이 있다고 가정 합니다.

나는 각 있도록 원하는 span에서 BookDetail의 관련 표시, 클릭, item에서 chapterDetailDIV. 다른 것을 span클릭하면 chapterDetaildiv가 해당 item 세부 정보로 채워집니다 . (이것은 단순한 예일뿐입니다. 상태 비 저장 구성 요소에 대한 다른 순수한 모양 변경 일 수 있습니다. 부모가 추적해야하는 과잉 인 것처럼 보입니다)

상태를 제공하지 않고 렌더링 된 후 상태 비 저장 구성 요소의 UI / 모양을 변경하는 방법을 모르겠습니다. 또는 부모가 본질적으로 '하위 상태'를 추적하도록합니다 (구성 요소의 모양을 업데이트하는 유일한 방법이기 때문에 상태를 변경하여 렌더링을 트리거하는 것입니다).

BookDetail을 상태 저장 구성 요소로 만들지 않고이를 수행하는 방법이 있습니까?