我想知道在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是否要求您始终将分层组件结构“展开”(即展平)为多个粒度顶级组件？
这是输出,顺便说一下：
编辑：我确实意识到我没有为每个选择条目包含一个“密钥”,它在控制台中抱怨,但问题不受此影响.
不,React不要求你这样做.
如果您愿意,可以将所有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>;
因此,您可以在组件渲染中(或在无状态组件的函数体中)定义此函数,如下所示：
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>
);
};
