Phản ứng js và PropTypes lặp lại trên khắp các thành phần chia sẻ

Question

tôi đã tạo ra một số phản ứng linh kiện và như vậy, phụ huynh ... được một vài đạo cụ ...

Mỗi đứa trẻ tiếp theo sau đó sử dụng hầu hết các đạo cụ, sau đó trẻ em của trẻ em.

**--> Parent** 
(required props) 
**-------> child** 
(required props) 
**-------> child** 
(required props) 
**------------> sub child** 
(required props) 
**------------> sub child** 

"đạo cụ bắt buộc" này giống nhau cho tất cả các thành phần đó. Có vẻ quá mức mà bất cứ khi nào tôi cập nhật một sự ủng hộ trong Phụ Huynh, thì tôi phải đi vào tất cả những đứa trẻ đó và cập nhật (nếu chúng được yêu cầu). Tất nhiên, chúng được yêu cầu và cần thiết, nhưng tò mò nếu có một phím tắt/hoặc thực hiện lặp lại này là không cần thiết. Bất kỳ ý tưởng?

Cảm ơn

Answer 1

Bạn có thể lưu trữ các loại prop của bạn trong một đối tượng mà bạn nhập vào từng thành phần của propTypes:

var requiredPropTypes = { 
    foo: ..., 
    bar: ... 
}; 

var ComponentA = React.createClass({ 
    propTypes: { 
     ...requiredPropTypes, 
     // ComponentA's prop types follow 
     // ... 
    }, 
    // ... 
}); 

var ComponentB = React.createClass({ 
    propTypes: { 
     ...requiredPropTypes, 
     // ComponentB's prop types follow 
     // ... 
    }, 
    // ... 
}); 

---

Giá trị của propTypes chỉ là một đối tượng. Cách bạn xây dựng đối tượng đó hoàn toàn tùy thuộc vào bạn.

Answer 2

Điều này khá đơn giản. Nếu mã es6 văn bản của bạn, bạn có thể sử dụng hình dạng của một thành phần mà bạn nhập

import React, { PropTypes } from 'react';  
import { Button } from 'components'; 

const NewComponent = (props) => { 
    return (
     {props.buttons.map((button) => 
      <div> 
       <Button {...props} /> 
      </div> 
     )} 
    ); 
} 

NewComponent.propTypes = { 
    buttons: PropTypes.arrayOf(PropTypes.shape({ Button }.propTypes)) 
}; 

Answer 3

Các spread operator có thể có ích:

import OtherComponent from './OtherComponent'; 

const MyComponent = ({ foo }) => (<OtherComponent {...foo} />); 

MyComponent.propTypes = { 
    foo: PropTypes.shape({ ...OtherComponent.propTypes }), 
}; 

export default MyComponent;