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")
);

我google了一下，但由于我是JS和React的新手，我觉得我误解了一些东西，因为这段代码不起作用。根据我的理解，它应该显示＆＃34; Hello World＆＃34;，但没有任何反应。

Answer 1

这会奏效。渲染Foo而不是Bar

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

还使用ReactDOM.render ReactDom.Render的插入（渲染的小写）

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

Answer 2

你实际上有三件事情在继续。首先，正如其他人所说，你应该在你的渲染方法中使用<Foo />，其次，渲染应该是小写，（ReactDOM.render）而不是ReactDOM.Render。

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

babel.min.js：24无法加载文件：/// C：script.js：交叉源请求仅支持协议方案：http，data，chrome，chrome-extension，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 个答案: