javascript - 访问 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 insetad of ReactDom.Render(渲染小写)

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