import React from 'react';
import ReactDOM from 'react-dom';
class Parent extends React.Component {
let name=this.props.name;
render() {
return (
<h1>
{name}
</h1>
);
}
}
ReactDOM.render(
<Parent name="Luffy"/>,
document.getElementById('app')
);e
大家好，我是 React 的新手，遇到了一个问题，我想通过 props 显示名称但它不起作用，如果我name=this.props.name在 render() 内部使用 它可以正常工作，但是如何在渲染之外获取它的值，请帮忙并提前致谢
根据 ES 维基
（有意）没有直接的声明方式来定义原型数据属性（方法除外）类属性或实例属性
类属性和原型数据属性需要在声明之外创建。
类定义中指定的属性被赋予与它们出现在对象文字中相同的属性。
类定义定义原型方法 - 在原型上定义变量通常不是您要做的。
要在渲染之外获取值，您可以在构造函数中有一个变量，然后像这样访问它的值
class Parent extends React.Component {
constructor(props) {
super(props);
this.name = props.name
}
render() {
return (
<h1>
{this.name}
</h1>
);
}
}
ReactDOM.render(
<Parent name="Luffy"/>,
document.getElementById('app')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>随着Es7 initializers. 你可以做
class Parent extends React.Component {
name = this.props.name
render() {
return (
<h1>
{this.name}
</h1>
);
}
}
ReactDOM.render(
<Parent name="Luffy"/>,
document.getElementById('app')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>但是，由于您是根据 props 分配值，因此理想的方法是利用生命周期函数，然后使用它。如果你想在一个状态中更新，那么更好的地方是在componentWillMount和函数中有这个逻辑componentWillReceiveProps。
但是，如果您只想更新变量并在渲染中使用它，最好的地方是在渲染函数本身中使用它
class Parent extends React.Component {
state = {
name: ''
}
componentWillMount() {
this.setState({name:this.props.name});
}
componentWillReceiveProps(nextProps) {
this.setState({name: this.props.name});
}
render() {
return (
<h1>
{this.state.name}
</h1>
);
}
}
ReactDOM.render(
<Parent name="Luffy"/>,
document.getElementById('app')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>或者
class Parent extends React.Component {
render() {
let name = this.props.name
return (
<h1>
{name}
</h1>
);
}
}
ReactDOM.render(
<Parent name="Luffy"/>,
document.getElementById('app')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>import React from 'react';
import ReactDOM from 'react-dom';
class Parent extends React.Component {
let name=props.name; // no need to use this.props.name
/* but a better way is to directly use {this.props.name}
inside the <h1> tag if you are not manipulating the data.
*/
render() {
return (
<h1>
{name}
</h1>
);
}
}
ReactDOM.render(
<Parent name="Luffy"/>,
document.getElementById('app')
);