gpt4 book ai didi

javascript - 如何在reactjs中互相嵌入组件?

转载 作者:行者123 更新时间:2023-11-28 18:10:50 25 4
gpt4 key购买 nike

如何将另一个组件导入到该组件中?我需要创建另一个文件并在那里声明该类吗?如果是这样,我如何将其导入到该方案中?我正在使用 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"));

最佳答案

第一个文件:

import React from 'react';

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

第二个文件将使用文本框:

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 将查看依赖项并将文件捆绑在一起(使用正确的配置)。

关于javascript - 如何在reactjs中互相嵌入组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41620566/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com