reactjs – 我是否必须*在React.JS中展平所有层次组件声明？

那么,为什么不这样做呢？实际上有很多原因：可读性,可重用性,可测试性,可维护性等.

含义：当您需要某些逻辑独立时,您可以创建单独的组件.在您的问题中,您将ListEntry作为单独的组件.为什么？如果你不在代码中的任何其他地方使用该组件,你可以根据需要将该逻辑放在SomeList中.

我认为你的问题的关键是：如果你不使用它的任何逻辑,你不需要从React.Component继承.基本的“无状态组件”可以写成函数：

function MyComponent(props) {
    (...some logic...)
    return <option>{ props.value }</option>;
}

或者,ES6等效：

const MyComponent = props => { 
    (...some logic...)
    return <option>{ props.value }</option>;
}

或者,如果你在渲染中根本不需要任何逻辑：

const MyComponent = props => <option>{ props.value }</option>;

因此,您可以在组件渲染中(或在无状态组件的函数体中)定义此函数,如下所示：

class SomeList extends Component {
    render() {
        const ListEntry = props => <option>{ props.value }</option>;
        return (
            <select>
                { [...Array(10).keys()].map(x => (
                    <ListEntry key={x} value={Math.random()} />
                ))}
                <ListEntry value="basic" />
                <ListEntry value="another" />
            </select>
        );
    }
}

这里,ListEntry组件的代码在SomeList组件的render中定义. (免责声明：我不认为渲染是这个tho的最佳位置,它只是为了说明这一点).
虽然,我并没有真正看到这样做的重点.由于ListEntry不包含任何逻辑,为什么不使用< option>直接而不是ListEntry？
它可能很简单：

const SomeList = () => {
    return (
        <select>
            { [...Array(10).keys()].map(index => (
                <option key={index}>{ Math.random() }</option>
            ))}
            <option>Basic</option>
            <option>Another</option>
        </select>
    );
};

至于你的SVG示例：如果你采用上述内容并为你需要的组件创建函数,它可以这样写：

const SomeSvg = () => {
    const SmallCircle = props => (
        <circle {...props} r="5" stroke="blue" fill="dodgerblue" strokeWidth="2" />
    );

    const BigCircle = props => (
        <circle {...props} r="100" strokeWidth="7" fill="grey" />
    );

    const randomCoords = (n,domain) => [...Array(n).keys()].map(() => ({
        x: Math.floor(Math.random() * domain + 1),y: Math.floor(Math.random() * domain + 1)
    }));

    return (
        <svg width="700" height="700">
            { randomCoords(5000,700).map((xy,i) => <SmallCircle key={i} cx={xy.x} cy={xy.y} />) }
            <BigCircle cx="1" cy="1" stroke="orange" />
            <BigCircle cx="700" cy="700" stroke="green" />
            <BigCircle cx="1" cy="700" stroke="red" />
            <BigCircle cx="700" cy="1" stroke="blue" />
            <SmallCircle cx="200" cy="200" />
        </svg>
    );
};