首先,我来介绍php的背景知识,并且我目前正在构建一个React中的中间件,我这样做的方式将是这样的:
class Middleware extends React.Component {
funcOne(data) {
return data;
}
funcTwo(data) {
return (
<div>
{ data }
<br />
{ this.funcThree('Third function') }
</div>
);
}
}
class MyComponent extends Middleware {
funcOne(data) {
return `Rewrite of ${data}`;
}
funcThree(data) {
return data;
}
render() {
return (
<div>
{ this.funcOne('First function') }
{ this.funcTwo('Second function') }
</div>
);
}
}
class MySecondComponent extends Middleware {
funcThree(data) {
return data;
}
render() {
return (
<div>
{ this.funcOne('First function') }
{ this.funcTwo('Second function') }
</div>
);
}
}
ReactDOM.render(
<div>
<MyComponent />
<hr />
<MySecondComponent />
</div>,
document.getElementById('root'),
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="root"></div>
但是,我真的找不到关于是否执行此操作的任何文档。
那么,这是错的吗?
如果是这样,我应该怎么做呢?
最佳答案
在更新的代码中,只需为funcTwo
创建一个组件并将一个prop传递给它:
function funcOne () {
return 'First function';
}
function Two (props) {
return (
<div>
Second function
<br />
{ props.three }
</div>
);
}
//...
render() {
return (
<div>
{ funcOne() }
<br />
<Two three={this.funcThree()} />
</div>
);
}
我从未见过任何必须在React中使用继承的用例。就您而言,只需创建组件或简单函数即可。此外,组件也可以是普通函数:
这可以是一个组件:
function One (props) {
return <h1>hello</h1>
}
您可以这样使用它:
<One />
或者,如果您只需要字符串,则只需编写函数:
function funcOne () {
return 'First function';
}
function funcTwo () {
return 'Second function';
}
// ...
render() {
return (
<div>
{ funcOne() }
<br />
{ funcTwo() }
</div>
);
}
因此,您根本不需要继承。在JavaScript中,尤其是React中,您应该尝试以更实用的方式进行思考。您会发现它非常强大和灵活。
您可以在此处找到有关组件组成的官方文档:https://facebook.github.io/react/docs/composition-vs-inheritance.html
我也建议您阅读以下内容:https://facebook.github.io/react/docs/thinking-in-react.html
关于javascript - Rect扩展中间件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43341191/