React.js: Thiết lập một giá trị mặc định vào một chỗ dựa

Question

Fellows Tôi đã thực hiện Hợp phần này tạo ra một nút đơn giản:

class AppButton extends Component { 

    setOnClick() { 
    if(!this.props.onClick && typeof this.props.onClick == 'function') { 
     this.props.onClick=function(){ alert("Hello"); } 
    } 
    } 

    setMessage() { 
    if(!this.props.message){ 
     this.props.message="Hello" 
    } 
    } 

    render(){ 
    this.setOnClick() 
    this.setMessage() 
    return (
     <button onClick={this.props.onClick}>{this.props.message}</button> 
    ) 
    } 
} 

Và tôi có một khác Component mà ám 2 Buttons:

class App extends Component { 
    render() { 
    return (
      <AppButton onClick={function(){ alert('Fuck You') } } message="Fucked up Button" /> 
      <AppButton /> 
    ); 
    } 
} 

Nhưng tôi nhận được lỗi sau:

TypeError: can't define property "message": Object is not extensible

Trên dòng nói rằng:

 this.props.message="Hello" 

trong phương thức setMessage của lớp AppButton.

Sửa 1

tôi tạo ra các ứng dụng phản ứng sử dụng npm và tôi package.json có nội dung sau

{ 
    "name": "sample", 
    "version": "0.1.0", 
    "private": true, 
    "dependencies": { 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4" 
    }, 
    "devDependencies": { 
    "react-scripts": "1.0.7" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
} 

Answer 1

Tôi tin rằng defaultProps nên làm những gì bạn cần:

import PropTypes from 'prop-types'; 

class AppButton extends Component { 
render(){ 
    return (
     <button onClick={this.props.onClick}>{this.props.message}</button> 
    ) 
    } 
}; 

AppButton.propTypes = { 
    message: PropTypes.string, 
    onClick: PropTypes.func 
}; 

AppButton.defaultProps = { 
    message: 'Hello', 
    onClick: function(){ alert("Hello"); } 
}; 

Từ các tài liệu:

The defaultProps will be used to ensure that this.props.name will have a value if it was not specified by the parent component. The propTypes typechecking happens after defaultProps are resolved, so typechecking will also apply to the defaultProps.

Chỉnh sửa cho rõ ràng: Không nên có nhu cầu cho bạn setMessage trong trường hợp này.

Answer 2

Bạn đang sử dụng Phản ứng c.14 hoặc cao hơn? đối tượng đạo cụ hiện đã bị đóng băng và không thể thay đổi được. Bạn có thể sử dụng React.cloneElement thay vì

Answer 3

Bạn không thể đặt đạo cụ, bạn phải sử dụng trạng thái thay thế.

Nếu bạn cần thay đổi giá trị, sau đó nó phải được lưu trữ trong tiểu bang do đạo cụ là tĩnh.

Bạn nên làm điều đó theo cách này:

this.setState({message: 'your message'}); 

Và trong render phương pháp sử dụng nó như:

{this.state.message} 

Là một recomendation, bạn cũng nên khởi tạo nhà nước với giá trị đó trong các hàm tạo:

constructor(props){ 
    super(props); 

    this.state = { 
    message: '' 
    } 
} 

Điều tương tự cũng sẽ xảy ra với setOnClick

Bạn sẽ tìm thấy here giải thích tốt về điều này.

Answer 4

return (
     <button onClick={this.props.onClick}>{this.props.message || "Default text"}</button> 
); 

Điều này sẽ kiểm tra giá trị của giá trị và nếu không được xác định hoặc null, thông báo mặc định sẽ thay thế giá trị.