Reactjs 从道具创建组件时页面冻结

我在一个文件中创建Screens组件，然后将其传递到Modal组件中。在模态内部，我尝试使用屏幕。屏幕需要一个索引道具来告诉它要显示什么。如果我显示props.screens（屏幕组件），它会工作，但我看不到传递道具的方法。如果我试图显示（屏幕）=>（），一切都会冻结

定义屏幕的文件

const Screens = (props) => {
    let index = props !== undefined ? props.index.idx : 0;
    const [contentData, setContentData] = useState({});
    let [indexState, setIndexState] = useState(index);
    
    console.log(`indexState: ${indexState}`)
    
    const onChange = (e) => {
        const newData = {
          ...contentData,
          [e.target.id]: e.target.value
        }
        setContentData(newData)
    };
    
    const Screen1 = () => {
        return (
            <>
                <input type="text" id="screen1_input1" onChange={onChange} />
                <br />
                one
            </>
        )
    };
    const Screen2 = () => {
        return (
            <>
                <input type="text" id="screen2_input1" onChange={onChange} />
                <br />
                <input type="text" id="screen2_input2" onChange={onChange} />
                <br />
                two
            </>
        )
    };
    
    const content = [
        Screen1,
        Screen2
    ];
    
    return (
        <>
            <h2 className="screens">
                {content[indexState]()}
            </h2>
        </>
    );
}

const屏幕=（道具）=>{
让index=props！==未定义？props.index.idx:0；
const[contentData，setContentData]=useState（{}）；
让[indexState，setIndexState]=useState（索引）；
log（`indexState:${indexState}`）
const onChange=（e）=>{
常数newData={
…内容数据，
[e.target.id]：e.target.value
}
setContentData（新数据）
};
常量屏幕1=（）=>{
返回(


一
)
};
常量屏幕2=（）=>{
返回(




二
)
};
常量内容=[
屏幕1，
屏幕2
];
返回(
{content[indexState]（）}
);
}

这将作为道具屏幕传入

Modal.js

...

const screens = props.screens;
const Screens = (screens) => (<Screens index={{idx:0}}/>);

...

return (
    {screens()} // works but doesn't let me pass in props
    {Screens} // everything freezes
)

。。。
常量屏幕=道具屏幕；
常量屏幕=（屏幕）=>（）；
...
返回(
{screens（）}//可以工作，但不允许我通过道具
{屏幕}//一切都冻结了
)

---

实际上，我只需要一种在模态中使用屏幕的方式，让我能够动态地发送道具。

有很多方法可以做到这一点，但这里只有一种：

// Modal.jsx
const Modal = ({ componentToRender }) => (
  ...JSX before component
  {componentToRender()}
  ..JSX after component
)

// File where Modal is being rendered
const SomeComponent = () => <Modal componentToRender={() => <Screen id={1} />} />

//Modal.jsx
常量模态=（{componentorender}）=>(
…组件之前的JSX
{componentorender（）}
…组件后的JSX
)
//渲染模态的文件
const SomeComponent=（）=>}/>

有很多其他的方法来实现同样的事情，你或多或少地通过你描述模态的方式来实现

您在第二个实例中的原始实现可以正常工作，但您需要调用屏幕以从函数中获取返回的组件：

...

const Screens = (screens) => (<Screens index={{idx:0}}/>);

...

return (
    {Screens()}
)

。。。
常量屏幕=（屏幕）=>（）；
...
返回(
{Screens（）}
)

第二个冻结，因为您只是将一个函数传递到渲染，但为什么要将它作为道具传递？是否存在无法导入组件并正常使用的上下文原因？@CoryHarper它在Storybook的故事文件中定义。这要求不同的测试用例被定义为不同的道具。@CoryHarper基本上是让模态组件尽可能通用，同时允许它接受不同的屏幕。好的，还有一件事，你能在你的原始帖子中添加模态是如何呈现的吗？@CoryHarper-Modal只是页面上某个被传递道具的地方的一个普通组件。如果我将屏幕导入模态中，这是可行的，但如果我只是尝试使用道具.screes中的一个，则不行……如果props.screes只是一个功能组件，你可以像其他任何组件一样呈现它，

const Screens=props.Screens。。。。return（）