如何更改特定的子組件的狀態，通過祖父母組件？

我有應用程序，具有佈局組分，其主要成分，它有兩個書架組件和每個書架部件具有五個書組件。我怎樣才能例如改變第二書架，第五書 state.taken到真正或假從佈局組件？如何更改特定的子組件的狀態，通過祖父母組件？

它看起來是這樣的：

Layout.js

export default class Layout extends React.Component { 
    render() { 
    var bookshelves = [ 
     1,2 
    ].map((bookshelf_id, i) => <Bookshelf key={i} bookshelf_id={bookshelf_id}/>); 
    return (
     <div> 
     {bookshelves} 
     </div> 
    ); 
    } 
}

Bookshelf.js

export default class Bookshelf extends React.Component { 
    render() { 
    var books = [ 
     1,2,3,4,5 
    ].map((book_id, i) => <Book key={i} book_id={book_id}/>); 
    return (
     <table> 
     <h1>Shelf{this.props.bookshelf_id}</h1> 
     {books} 
     </table> 
    ); 
    } 
}

Book.js

export default class Book extends React.Component { 
    render() { 
    var style= { 
     backgroundColor: this.props.taken ? 'red' : 'green' 
    }; 
    return (
     <td style={style}>Book{this.props.book_id}</td> 
    ); 
    } 
}

來源

2016-02-19 N.Sto

那麼，您需要更新示例代碼才能在一個書架上更改書籍。在你的例子中，每個書架總是有相同的5本書，具有相同的ID。因此，在此設置中，您不能僅在一個書架上更改書籍。

此外，如果您通過祖父母的taken參數，它是一個道具，而不是狀態。
你可以使用道具並將其轉化爲初始狀態，但這隻會讓用戶之間有一些互動來操縱狀態。

最後，在反應中使用映射索引作爲key並不是一個好主意。最好使用唯一的ID。

更新後的代碼會是這個樣子：

Layout.js

export default class Layout extends React.Component { 
    render() { 
    // library is an array of bookshelf objects 
    // each bookshelf object contains book objects 
    // fifth book on second shelf is taken 
    var library = [ 
     { id: "shelf1", books: [ 
     { id: "book11", taken: false }, 
     { id: "book12", taken: false }, 
     { id: "book13", taken: false }, 
     { id: "book14", taken: false }, 
     { id: "book15", taken: false }] 
     }, 
     { id: "shelf2", books: [ 
     { id: "book21", taken: false }, 
     { id: "book22", taken: false }, 
     { id: "book23", taken: false }, 
     { id: "book24", taken: false }, 
     { id: "book25", taken: true }] 
     } 
    ]; 
    var bookshelves = library.map((bookshelf) => 
     <Bookshelf key={bookshelf.id} 
       bookshelf_id={bookshelf.id} 
       books={bookshelf.books}/>); 
    return (
     <div> 
     {bookshelves} 
     </div> 
    ); 
    } 
}

Bookshelf.js

export default class Bookshelf extends React.Component { 
    render() { 
    var books = this.props.books.map((book) => 
     <Book key={book.id} book_id={book.id} taken={book.taken}/>); 
    return (
     <table> 
     <h1>{this.props.bookshelf_id}</h1> 
     {books} 
     </table> 
    ); 
    } 
}

Book.js

export default class Book extends React.Component { 
    // put initial taken parameter in state 
    getInitialState() { 
    return { taken: this.props.taken } 
    }, 
    render() { 
    var style= { 
     backgroundColor: this.state.taken ? 'red' : 'green' 
    }; 
    return (
     <td style={style}>Book{this.props.book_id}</td> 
    ); 
    } 
}

來源

2016-02-19 20:41:45 wintvelt

搞清楚道具/州應該exi st可能是使用React最具挑戰性和有趣的部分。作爲哲學的指導，我會很好地看看Thinking In React指南。

但是要簡單回答你的問題;

數據應始終作爲需要訪問它的最高級別組件中的狀態存在。因此，對於此示例，您書籍的實際數據應作爲Layouts組件上的狀態元素存在。

數據以道具的形式傳遞給兒童，並被低層認爲是不可改變的。即，您的書架和書籍組件將無法直接修改其擁有的圖書數據。相反，他們將使用道具回調Layouts，這將對其狀態中的數據執行操作，並因此將更新其子項的道具，從而導致適當的重新渲染。

React中的數據是單向的，從父到子。兒童組件應該永遠不需要詢問父母的任何事情。父母應該提供孩子們需要的一切道具。

來源

2016-02-19 20:58:59 gravityplanx

如何更改特定的子組件的狀態，通過祖父母組件？

回答

相關問題