React现有应用程序中的组件

'use strict';

const element = React.createElement

class CourseForm extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      someObject: ''
    }
  }

  changeObject() {
    //this value will change on various events
    this.setState({ someObject: {key: value} })
  }

  render() {
    return (
      <div>

        This is a react form!

      </div>
    )
  }
}

const domContainer = document.querySelector('#react-course-form')
ReactDOM.render(element(CourseForm), domContainer)

html元素用于显示组件。

<div id="react-course-form"></div>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- Load React component. -->
  <script type="text/babel" src="./js/components/CourseTabs.jsx"></script>
  <script type="text/babel" src="./js/components/CourseForm.jsx"></script>

我想做的是包含另一个组件,并向它发送来自该组件的事件数据。

render() {
    return (
  <div>

    This is a react form!
    <button onClick={this.changeObject}>change</button>

    <div id="another-component" sendObject="this.state.someObject">
    <div id="another-component2" sendObject="this.state.someObject">

  </div>
)
}

所以我基本上希望子组件知道 someObject 是因为它们将显示来自该对象的数据。