javascript - 在 React 类中的渲染之外指定变量

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 的新手，我遇到了一个问题，我想通过 props 显示名称，但它不起作用，如果我使用 name=this.props.name 在 render() 中它工作正常，但是如何在 render 之外获取它的值，请提前帮助并感谢

Answer 1

根据 ES wiki

There is (intentionally) no direct declarative way to define either prototype data properties (other than methods) class properties, or instance property

Class properties and prototype data properties need be created outside the declaration.

Properties specified in a class definition are assigned the same attributes as if they appeared in an object literal.

类定义定义原型(prototype)方法 - 在原型(prototype)上定义变量通常不是您要做的事情。

要在渲染之外获取值，您可以在构造函数中有一个变量，然后像这样访问它的值

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>