Question

如何将其他组件导入此组件？我是否需要制作另一个文件并在那里声明课程？如果是这样，我将如何将其导入此方案？我使用的是babel和webpack。

具体来说，我希望输入是它自己的组件，并且具有自己的状态，该状态被传递到MyReactApplication组件。我只需要将输入逻辑隔离，因为它将在应用程序中的许多地方使用。

var React = require('react');
var ReactDOM = require('react-dom');

class MyReactApplication extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      color: "hotpink"
    };
  }

  componentDidMount() {
    this.setState({
      color: "steelblue"
    });
  }

  changeColor(event) {
    this.setState({
      color: event.target.value
    });
  }

  render() {
    const styleObj = {
      backgroundColor: this.state.color
    };

    return(
      <section className="temp" style={styleObj} id="my-user">
        <h1>{this.state.color}</h1>
        <input value={this.state.color} onChange={this.changeColor.bind(this)}  />
      </section>
    );

  }
}

ReactDOM.render(<MyReactApplication name="Mustafa"/>, document.getElementById("app"));

Answer 1

您必须导入它：import Component from './file'或var Component = require('./file');

然后您可能希望将其用于渲染<Component />

你应该真正了解React的基础知识。 https://facebook.github.io/react/tutorial/tutorial.html

Answer 2

文件编号：

import React from 'react';

export default class Textbox extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
          <span>my text box</span>
        )
    }
}

文件编号2将使用文本框：

import React from 'react';
import Textbox from './textbox';

export default class Textbox extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
          <div className="texbox-wrapper">
              <Textbox />
          </div>
        )
    }
}

babel将传输文件，webpack将查看依赖项并将文件捆绑在一起（使用正确的配置）。

Answer 3

您需要从您尝试隔离并导出它的输入文件中创建一个新组件。然后是import InputComponentName from 'file_path'（es6）或require('file_path')（es5），并将其用作<InputComponentName />。

如何在reactjs中将组件嵌入到彼此中？

3 个答案: