反应道具不会在父组件中呈现，甚至在同一组件中也不会呈现

Question

我在React中使用两个组件编写了一些虚拟代码。

第一：

import React, { Component } from "react";
import Square from "./components/square";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <Square color={this.props.CardStyle} />
      </div>
    );
  }
}

export default App;

第二个：

import React, { Component } from "react";

class Square extends Component {
  render() {
    var CardStyle = {
      height: "200px",
      width: "150px",
      padding: 0,
      backgroundColor: "#FFF",
      filter: "drop-shadow(0px 0px 5px #666)"
    };

    const mera = "merone";

    return (
      <div style={CardStyle}>
        <p>{this.props.mera}</p>
      </div>
    );
  }
}

export default Square;

现在，我想在Square组件的p上呈现它的支柱“mera”，但事实并非如此。 另外，我想渲染它将它传递给父组件App。 我该怎么做？

Answer 1

mera不是道具，它是Square的const 。 将const mera = "merone"移动到您的App组件，并将其作为prop <Square mera={mera} .../>传递给它

Answer 2

我相信你的困惑在于如何使用反应道具。 （ 道具和组件 ）react中的prop只是一个从父级传递给子级的变量。 在这种情况下，您正在寻找子组件“Square”中的道具'mera'，但是您没有从父组件中传递它。 如果要在子组件中设置值，则应该使用react状态。 否则你会通过以下方式传递它：

<Square mera={"merone"} color={this.props.CardStyle} />

在React中有多种方法可以使用变量。

道具（确保传递变量）：

import React, { Component } from "react";

class Square extends Component {
  render() {
    var CardStyle = {
      height: "200px",
      width: "150px",
      padding: 0,
      backgroundColor: "#FFF",
      filter: "drop-shadow(0px 0px 5px #666)"
    };

    return (
      <div style={CardStyle}>
        <p>{this.props.mera}</p>
      </div>
    );
  }
}

export default Square;

州：

import React, { Component } from "react";

class Square extends Component {

  state = { mera: "merone" };

  render() {
    var CardStyle = {
      height: "200px",
      width: "150px",
      padding: 0,
      backgroundColor: "#FFF",
      filter: "drop-shadow(0px 0px 5px #666)"
    };

    return (
      <div style={CardStyle}>
        <p>{this.state.mera}</p>
      </div>
    );
  }
}

export default Square;

范围变量：

import React, { Component } from "react";

class Square extends Component {
  render() {
    var CardStyle = {
      height: "200px",
      width: "150px",
      padding: 0,
      backgroundColor: "#FFF",
      filter: "drop-shadow(0px 0px 5px #666)"
    };

    const mera = "merone";

    return (
      <div style={CardStyle}>
        <p>{mera}</p>
      </div>
    );
  }
}

export default Square;

类属性（修改后不会重新呈现组件）：

import React, { Component } from "react";

class Square extends Component {

  mera = "merone";

  render() {
    var CardStyle = {
      height: "200px",
      width: "150px",
      padding: 0,
      backgroundColor: "#FFF",
      filter: "drop-shadow(0px 0px 5px #666)"
    };

    return (
      <div style={CardStyle}>
        <p>{this.mera}</p>
      </div>
    );
  }
}

export default Square;

Answer 3

这个答案只是为了好玩。 接受的答案解释一些有用的东西，如州。 如果组件的渲染依赖于更改的数据，则在您的状态中使用它。 对于其他静态事物，您当然可以在render方法中使用类属性或变量。

 class Parent extends React.Component { outsideRender = "outside of render as a class property"; render() { const insideRender = "inside of render as a constant"; return ( <Child outsideRender={this.outsideRender} insideRender={insideRender} /> ) } } class Child extends React.Component { childOutsideRender = "Child's class property outside render"; render() { const childInsideRender = "Child's variable inside render"; return ( <div> outsideRender: I am coming from parent, as prop and {this.props.outsideRender} <br /> insideRender: I am coming from parent, as a prop and {this.props.insideRender} <br /> childOutsideRender: {this.childOutsideRender} <br /> childInsideRender: {childInsideRender} </div> ) } } ReactDOM.render( <Parent />, 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>