访问ReactJS中另一个组件的状态？

Question

我有2个组件，其中一个具有状态，我想从另一个组件访问该状态。

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {test:"Hello World"};
  }
  render() {
    return(<Bar {...this.state} />);
  }
}

class Bar extends React.Component {
  render() {
    return(<h1>{this.props.test}</h1>);
  }
}

ReactDOM.Render(
  <Bar />,
  document.getElementById("root")
);

我在谷歌上搜索了一下，但是由于我是JS和React的新手，所以我误解了一些东西，因为此代码不起作用。 据我了解，它应该显示“ Hello World”，但是什么也没有发生。

Answer 1

这将起作用。 渲染Foo而不是Bar

ReactDOM.Render(
  <Foo />,
  document.getElementById("root")
);

还可以使用ReactDOM.render ReactDOM.render ReactDom.Render （用于渲染的小写字母）

这是一个工作版本： https : //codepen.io/anon/pen/OOemzW?editors=1010

Answer 2

您实际上正在进行三件事。 首先，就像其他人所说的那样，您应该在render方法中使用<Foo /> ，其次，render应该是小写的（ ReactDOM.render ）而不是ReactDOM.Render 。

最后，尝试按原样使用babel加载script.js文件，在我的开发人员控制台中为我生成以下错误：

babel.min.js：24无法加载文件：/// C：script.js：跨源请求仅支持以下协议方案：http，数据，chrome，chrome扩展名，https。

以下作品。 只需将其放入一个文件中并打开即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="stylesheet.css" type="text/css" rel="stylesheet">
  <script src="https://unpkg.com/react@0.14.3/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@0.14.3/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    class Foo extends React.Component {
      constructor(props) {
        super(props);
        this.state = {test:"Hello World"};
      }
      render() {
        return(<Bar {...this.state} />);
      }
    }

    class Bar extends React.Component {
      render() {
        return(<h1>{this.props.test}</h1>);
      }
    }

    ReactDOM.render(
      <Foo />,
      document.getElementById("root")
    );
  </script>
</body>
</html>

访问ReactJS中另一个组件的状态？

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-12-07 19:33:09

解决方案2
0 2017-12-07 20:28:13

访问ReactJS中另一个组件的状态？

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-12-07 19:33:09

解决方案2 0 2017-12-07 20:28:13

解决方案1
3 已采纳 2017-12-07 19:33:09

解决方案2
0 2017-12-07 20:28:13