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不是道具，它是const中的Square。将const mera = "merone"移至App组件，并将其作为道具<Square mera={mera} .../>

传入

Answer 2

我相信您的困惑在于如何使用反应道具。（Props and components）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>

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

3 个答案: