Javascript React现有应用程序中的组件

我开始向现有网站添加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)

“严格使用”；
常量元素=React.createElement
类CourseForm扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
某些对象：“”
}
}
changeObject（）{
//此值将在各种事件中更改
this.setState（{someObject:{key:value}}）
}
render（）{
返回(
这是一个反应形式！
)
}
}
const domContainer=document.querySelector（“#反应过程表单”）
render（元素（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>
)
}

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

<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>
)
}

render（）{
返回(
这是一个反应形式！
改变
)
}

---

因此，我基本上希望子组件知道什么是

someObject

，因为它们将显示来自该对象的数据。

您可以创建另一个组件并导入到您的CourseForm组件中。然后，您可以在渲染方法中使用它，并将道具发送给它，就像您现在在示例中所做的那样。你用的是普通的div，所以它不起作用

例如：

<AnotherComponent sendObject={this.state.someObject} />

然后将其作为组件导入课程表单组件：

import AnotherComponent from '.. your filepath here';

并在CourseForm的渲染方法中使用其他组件：

<AnotherComponent sendObject={this.state.someObject} />

我认为更新需要Redux，它会处理得很好，据我所知，这是存储数据的最佳方式。你也可以用道具来做这件事。要创建子项，您需要这样做：如果您可以使用基于OPs或正交代码的工作示例来扩展此答案，则greatI将无法使用导入。我不知道如何在这个应用程序中使用它。这是一个基本的应用程序

JQuery

HTML

CSS

。我编辑了我的问题。现在，它显示了如何在页面中包含组件。它不是React应用程序。只是一些组件。嗯。。它仍然在反应；）因此，您只需以与导入其他组件相同的方式导入组件。事实上，我从来没有用过这种反应方式，但它应该会起作用。React最终只是浏览器中的javascript。。。因此，您应该能够执行以下操作：