Question

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的新手，我遇到了问题，我想通过道具显示名称，但是它不起作用，如果我在render（）中使用name=this.props.name它工作正常，但是如何在渲染之外获得它的价值，请提前帮助并提前致谢

Answer 1

根据ES维基

（故意）没有直接声明方式来定义   原型数据属性（方法除外）类属性，或   实例属性

需要在外部创建类属性和原型数据属性   声明。

在类定义中指定的属性被赋予相同的属性   属性就好像它们出现在对象文字中一样。

类定义定义了原型方法 - 在原型上定义变量通常不是你做的事情。

要获取render之外的值，可以在构造函数中有一个变量，然后像

一样访问它的值

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>

但是，由于您要根据道具分配值，因此理想的方法是使用生命周期函数然后使用它。如果你想在状态下更新，那么更好的方法是在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>

Answer 2

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')
);

在React类中指定render之外的变量

2 个答案: