作为一个普遍的问题，我将如何分离两个连接的组件？例如，如果我有一个布局：
section 1
some list (component 1)
assorted html elements
other components
etc...
section 2
output from list clicking (component 2)
在这种情况下，我是否在组件 1 中包含其他 html/组件？或者有没有办法让列表和输出出现在页面的不同部分？
如何使用 React.js 将两个组件与 html/components 链接起来
IT技术
reactjs
2021-05-16 03:17:38
1个回答
您可以将第三个父组件作为围绕内部两个组件的容器。让组件 1 具有作为回调函数的属性，并让组件 1 在触发 click 事件时使用第二个组件所需的数据调用该回调。然后父组件可以将此数据作为props传递。例如：
function Component1(props) {
var onClick = function(e) {
props.callback(e, "hello");
};
return (
<ul>
<li onClick={onClick}>Some content</li>
</ul>
);
}
function Component2(props) {
return (
<p>{props.text}</p>
);
}
var parentComponent = React.createClass({
onComponent1Click: function(e, val) {
this.setState({ text: val });
},
render: function() {
return (
<div>
<section>
<Component1 callback={this.onComponent1Click} />
</section>
<p>Some other HTML</p>
<section>
<Component2 text={this.state.text} />
</section>
</div>
);
}
});
其它你可能感兴趣的问题