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

Question

我想知道在React中创建动态选择组件的规范方法是什么.我是否必须创建一个单独的组件,根据下面的代码返回选项,以便能够通过每个条目的props自定义值,然后将它们包含在一个单独的选择组件中？

class ListEntry extends React.Component {
  render = () => {
    return(
      <option value={this.props.ovalue}>{this.props.ovalue}</option>
    )
  }
}


class SomeList extends React.Component {
  genstuff = (n) => {
    var theEntries = [];
    for(var i = 0; i < n; i++) {
      theEntries.push(<ListEntry ovalue={Math.random().toString()} />)
    };
    return(theEntries)
  }

  render = () => {
    var entries = this.genstuff(10);
    return(
      <select>
        {entries}
        <ListEntry ovalue="a basic entry"/>
        <ListEntry ovalue="another"/>
      </select>
    )
  }
}

是否有另一种"接受"的方式在SomeList组件本身内执行此操作？如果是这样,有什么优点,缺点？

我也使用这种技术(成功)用于svg元素,所以上面的问题也适用:

class SmallCircle extends React.Component {
  render = () => {
    return(
      <circle cx={this.props.scx} cy={this.props.scy} r="5" 
        stroke="blue" fill="dodgerblue" strokeWidth="2"/>)
  }
}


class SomeSvg extends React.Component {

  randomCoords = (n, domain) => {
    let xs = [...Array(n).keys()].map(i=> {
      return {
        "i": i,
        "x": Math.floor(Math.random() * domain + 1).toString(),
        "y": Math.floor(Math.random() * domain + 1).toString()
      }
    })
    return(xs)
  }

  render = () => {
    var svgcoords = this.randomCoords(5000, 700);
    var thecircles = svgcoords.map(xy => <SmallCircle key={xy.i.toString() + xy.x.toString() + xy.y.toString()} 
        scx={xy.x} scy={xy.y} />);
    return(
      <svg width="700" height="700">
        {thecircles}
        <circle cx="1" cy="1" r="100" stroke="orange" strokeWidth="7" fill="grey" />
        <circle cx="700" cy="700" r="100" stroke="green" strokeWidth="7" fill="grey" />
        <circle cx="1" cy="700" r="100" stroke="red" strokeWidth="7" fill="grey" />
        <circle cx="700" cy="1" r="100" stroke="blue" strokeWidth="7" fill="grey" />
        <SmallCircle scx="200" scy="200" />
      </svg>
    )
  }
}

所以基本上我的问题是,React是否要求您始终将分层组件结构"展开"(即展平)为多个粒度顶级组件？

这是输出,顺便说一下:

编辑:我确实意识到我没有为每个选择条目包含一个"密钥",它在控制台中抱怨,但问题不受此影响.

Answer 1

不,React不要求你这样做.如果您愿意,可以将所有React代码放在一个巨大的组件中.

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

含义:当您需要某些逻辑独立时,您可以创建单独的组件.在您的问题中,您将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>;

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

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中定义.(免责声明:我认为这不是render最好的地方,只是为了说明这一点).虽然,我并没有真正看到这样做的重点.由于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>
    );
};