Javascript React.js：将默认值设置为 prop
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44419650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React.js: Set a Default value into a prop
提问by Dimitrios Desyllas
Fellows I have made this Component that creates a simple Button:
我已经制作了这个组件来创建一个简单的按钮：
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>
)
}
}
And I have an another Component that renders 2 Buttons:
我还有一个呈现 2 个按钮的组件：
class App extends Component {
render() {
return (
<AppButton onClick={function(){ alert('Test Alert') } } message="My Button" />
<AppButton />
);
}
}
But I get the following error:
但我收到以下错误：
TypeError: can't define property "message": Object is not extensible
类型错误：无法定义属性“消息”：对象不可扩展
On the line that says:
在说：
this.props.message="Hello"
in method setMessageof the AppButtonclass.
在类的方法setMessage中AppButton。
Edit 1
编辑 1
I generated the react application using npmand me package.jsonhas the following content
我使用生成的反应应用程序npm，我package.json有以下内容
{
"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"
}
}
回答by Jesse Kernaghan
I believe that defaultPropsshould do what you need:
我相信defaultProps应该做你需要的：
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"); }
};
From the docs:
从文档：
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.
如果父组件未指定 this.props.name ，则 defaultProps 将用于确保它具有值。propTypes 类型检查发生在 defaultProps 解析之后，因此类型检查也将应用于 defaultProps。
Edit for clarity: There should be no need for you setMessagein this instance.
为清楚起见进行编辑：setMessage在这种情况下应该不需要你。
回答by netoguimaraes
return (
<button onClick={this.props.onClick}>{this.props.message || "Default text"}</button>
);
This will check the value of prop and if it is undefined or null, the default message will replace the prop.
这将检查 prop 的值，如果它是 undefined 或 null，默认消息将替换 prop。
回答by Alejandro C.
Are you using React v.14 or above? the props object is now frozen and cant be changed. You can use React.cloneElement instead
您使用的是 React v.14 或更高版本吗？props 对象现在被冻结并且无法更改。你可以使用 React.cloneElement 代替
回答by Facundo La Rocca
You cant set props, you must use state instead.
你不能设置 props，你必须使用 state 来代替。
If you need to change the value, then it should be stored in the state due to props are static.
如果您需要更改该值，那么由于 props 是静态的，它应该存储在 state 中。
You should do it in this way:
你应该这样做：
this.setState({message: 'your message'});
And in the render method use it as:
并在渲染方法中将其用作：
{this.state.message}
As a recomendation, you should also initialize the state with that value in the constructor:
作为建议，您还应该在构造函数中使用该值初始化状态：
constructor(props){
super(props);
this.state = {
message: ''
}
}
The same will happend to setOnClick
同样会发生在 setOnClick
You will find herea good explanation about this.
你会在这里找到一个很好的解释。
