Javascript react prop不在父组件中渲染，甚至不在同一组件中渲染

我使用两个组件在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}来自“React”；
从“/components/Square”导入正方形；
导入“/App.css”；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

第二个：

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;

import React，{Component}来自“React”；
类Square扩展组件{
render（）{
var CardStyle={
高度：“200px”，
宽度：“150px”，
填充：0，
背景颜色：“FFF”，
过滤器：“投影（0px 0px 5px#666）”
};
const mera=“merone”；
返回(
{this.props.mera}

);
}
}
导出默认方块；

---

现在，我想在正方形组件的p上渲染其道具“mera”，但它没有。此外，我还希望将其传递给父组件App。我该怎么做呢？

mera

不是道具，它是

Square

中的

const

。将

const mera=“merone”

移动到您的

应用程序组件中，并将其作为道具传递
我相信您的困惑在于如何使用react道具。（）react中的prop只是从父对象传递给子对象的变量。在这种情况下，您正在子组件“Square”中寻找道具“mera”，但您没有从父组件传递该道具。如果要在子组件中设置值，可能应该使用react state。否则，您将使用以下方法传递它：

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



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

道具（确保传递变量）：

import React，{Component}来自“React”；
类Square扩展组件{
render（）{
var CardStyle={
高度：“200px”，
宽度：“150px”，
填充：0，
背景颜色：“FFF”，
过滤器：“投影（0px 0px 5px#666）”
};
返回(
{this.props.mera}

);
}
}
导出默认方块；

声明：

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}来自“React”；
类Square扩展组件{
state={mera:“merone”}；
render（）{
var CardStyle={
高度：“200px”，
宽度：“150px”，
填充：0，
背景颜色：“FFF”，
过滤器：“投影（0px 0px 5px#666）”
};
返回(
{this.state.mera}

);
}
}
导出默认方块；

作用域变量：

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}来自“React”；
类Square扩展组件{
render（）{
var CardStyle={
高度：“200px”，
宽度：“150px”，
填充：0，
背景颜色：“FFF”，
过滤器：“投影（0px 0px 5px#666）”
};
const mera=“merone”；
返回(
{mera}

);
}
}
导出默认方块；

类属性（修改时不会重新提交组件）：

import React，{Component}来自“React”；
类Square扩展组件{
mera=“merone”；
render（）{
var CardStyle={
高度：“200px”，
宽度：“150px”，
填充：0，
背景颜色：“FFF”，
过滤器：“投影（0px 0px 5px#666）”
};
返回(
{this.mera}

);
}
}
导出默认方块；
这个答案只是为了好玩。被接受的答案解释了一些有用的东西，比如状态。如果组件的渲染依赖于更改的数据，则在您的状态下使用它。当然，对于其他静态对象，可以在渲染方法中使用类属性或变量


类父级扩展React.Component{
outsideRender=“作为类属性呈现的外部”；
render（）{
const insideRender=“作为常量呈现的内部”；
返回(
)
}
}
子类扩展了React.Component{
childOutsideRender=“呈现外部的子类属性”；
render（）{
const childInsideRender=“呈现内部的子变量”；
返回(
局外人：我来自父母，作为道具和{this.props.outherender}


我来自父母，作为一个道具和{this.props.insideRender}


childOutsideRender:{this.childOutsideRender}


childInsideRender:{childInsideRender}
)
}
}
ReactDOM.render(
,
document.getElementById（“应用程序”）
);

所以基本上我不能引用和渲染与状态不同的内部对象，对吗？例如，我如何在Square组件中呈现const mera而不将其转换为状态，或者不将其传递到App组件并使用props调用它？使用标准JavaScript变量是完全有效的。在正方形组件中，您可以执行
{mera}
，而不是使用this.props.mera。但是，在渲染后修改此变量不会更新DOM。这就是状态的作用所在。与此相关的是：我只能在render方法中创建对象。我无法在它之外创建const mera。但是当涉及到创建一个新方法时，例如dummyMethod=（）=>{….}我可以在组件范围内的任何地方创建它。为什么？您可以创建渲染范围之外的任何内容，但它将被“this”包围。如果在函数范围外创建了属性“mera”，则可以在任何函数中使用
this.mera
访问该属性。请记住，修改此变量不会导致组件重新加载，除非您将其定义为此状态的一部分。此外，如果您在类FIELD中创建变量，请不要使用
const
。然后，正如@NickAbbott所说，在这个类组件中，通过
这个
到达它。在功能组件中，这种情况下没有
此
。在dummy函数中，没有您作为示例给出的
常量。在常规函数中也没有
函数。
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;