Question

我想将无状态视图组件分离到一个文件中，同时使用尽可能短的代码。

所以我有一些View.js，

export default {
    MySpan: (a)=>(<span>a.someValue</span>),
    MyDoubleSpan: (a,b)=>(<div><MySpan someValue={a} /><MySpan someValue={b} /><div/>)
}

在App.js里面是这样的：

import View from './View';
...
render() {
    return(<View.MyDoubleSpan a="a" b="b"/>);
}

您可能会直观地得到我的期望。但是（当然）这是行不通的。如何摆脱这种典型情况？还是我该如何直接从该对象的另一个字段中引用当前定义对象的某些（定义）字段？

Answer 1

我已经设法自己获得了答案！它是在定义组件之前导出，并通过名称引用它：

const View = {
    MySpan: (a)=>(<span>a.someValue</span>),
    MyDoubleSpan: (a,b)=>(
    <div>
        <View.MySpan someValue={a} />
        <View.MySpan someValue={b} />
    <div/>)
};
export default View;

Answer 2

创建一个返回跨度数组的组件（您可以在react中做到这一点）。这样，返回的跨度数量将与作为prop传递的数组的长度相同。干净吗？

const SpanComponent = ({content:['a','b']}) => content.map(item=><MySpan someValue={item} />

如何从对象本身内部引用json字段

2 个答案: