đúng destructuring this.props cho toàn bộ thành phần

Question

Tôi đã xem qua một vấn đề ngày hôm nay, xem xét thành phần sau đây:

export default class Input extends React.Component { 
    someFunction() { 
    console.log(this.props.value) 
    } 

    render() { 
    const { type, value, required } = this.props 
    return (
     <div className={cx('Input')}> 
     <input type={type} value={value} required={required} /> 
     </div> 
    ) 
    } 
} 

Tôi destrucutring thành công this.props và có thể sử dụng chúng trong render, tuy nhiên những gì nếu tôi cần phải sử dụng prop giá trị bên ngoài của nó tức là bên trong someFunction() Tôi không chắc chắn những gì sẽ là hậu quả nếu tôi di chuyển ra constant { ... } và bao gồm ngay sau khi export default class Input extends React.Component { dòng. Điều này vẫn còn hợp lệ?

Answer 1

Nếu bạn di chuyển nó ra ngoài, chúng sẽ rỗng, bởi vì lúc đó hàm tạo sẽ không được gọi.

Đó là phương pháp tiếp cận để giữ nó trong hiển thị hoặc chức năng bởi vì thành phần cha mẹ của bạn có thể thay đổi trạng thái sẽ khiến con bạn bị rerendered, Vì vậy, bạn cần đạo cụ tươi cho mỗi render.

Answer 2

Có thể xem xét cập nhật nó thành một thành phần chức năng.

function someFunction(props) { 
    console.log(props.value) 
} 

function Input(props) { 
    const { type, value, required } = props; 

    someFunction(props); // logs props.value 

    return (
    <div className={cx('Input')}> 
     <input type={type} value={value} required={required} /> 
    </div> 
) 
} 

export default Input; 

Answer 3

đúng destructuring this.props cho toàn bộ thành phần

Vâng, bạn không thể làm điều đó. Destructuring chỉ có thể gán các biến cục bộ, do đó bạn cần phải hủy cấu trúc props trong mỗi hàm. Nếu không thì không có gì sai khi phải viết this.props.value. Sử dụng destructuring khi nó giúp dễ đọc, không chỉ vì bạn không cảm thấy thích gõ this.props.

tôi sẽ viết mã của bạn như thế này

// import cx from whatever 

const someFunction = value=> console.log(value) 

export const Input = ({type, value, required}) => (
    someFunction(value), 
    <div className={cx('Input')}> 
    <input type={type} value={value} required={required} /> 
    </div> 
)