Question

我在另一个窗口中创建了一个门户，但是我一直在试图使img出现，但我不确定如何。

我用Google搜索了很多东西并阅读了文档。我不知道是不是我什么时候才真正读懂答案或找不到答案，但是我会有所帮助。

这是一些JSX。并非全部，但我认为这可能就足够了，因为这只是我不理解的简单事物。

`<MyWindowPortal
contents={contents}
targets={this.state.targets}
closeWindowPortal={this.closeWindowPortal}
logo1={{user: false}}
>
<Paper style={{ backgroundColor: "#4b5320", 
padding: "20px", width: "1200px", height: "100%" }}>
<img src={this.state.UrlAddress}/>
<div>{ JSON.stringify(this.state) }</div>
<img src={this.state.logo} />
<img src={this.state.logo3} />
<div style={{                       
  backgroundColor: "#1F3011",
  border: "7px solid #16570E",
  width: "93%",
  minHeight: "52px",
  margin: "8px",
  borderRadius: "25px",
  padding: "13px", 
  boxShadow: "12px 12px 12px 7px #081F05"
}}>

{this.state.targets.map(value => (
   <div style={{ 
       display: "inline", 
       width: "200px", 
       height: "200px"
   }}>

{value.on.toString() === "false" ? <div style={{          
height: "50px",
width: "50px",
backgroundColor: "#bbb",
borderRadius: "50%",
display: "inline-block",
margin: "0 4px"
}}</div> : null
}
</div>
))}
</div>
</Paper>
</MyWindowPortal>`

这是组件

class MyWindowPortal extends React.PureComponent {
constructor(props) {
    super(props);
    this.containerEl = document.createElement('div'); // STEP 1: create an empty div
    this.externalWindow = null;
    this.logo = logo;
}

componentDidMount() {
    // STEP 3: open a new browser window and store a reference to it
    this.externalWindow = window.open('', '', 'width=2250,height=800');

    // STEP 4: append the container <div> (that has props.children appended to it) to the body of the new window
    this.externalWindow.document.body.appendChild(this.containerEl);
3
    this.externalWindow.document.title = '::*Tactical Funhouse*::';

    // update the state in the parent component if the user closes the 
    // new window
    this.externalWindow.addEventListener('beforeunload', () => {
        this.props.closeWindowPortal();
    });
}

componentWillUnmount() {
    // This will fire when this.state.showWindowPortal in the parent component becomes false
    // So we tidy up by just closing the window
    this.externalWindow.close();
}

render() {
    // STEP 2: append props.children to the container <div> that isn't mounted anywhere yet
    return 
ReactDOM.createPortal(this.props.children, this.containerEl);
}
}

我从有关新的react门户的教程中复制了此内容，并认为它很棒。我正在尝试从套接字获取信息，然后将其传递给企业客户可以查看的窗口。状态有效，状态变化时“匹配”更新，但我无法显示img。

提前感谢任何人可能提供的帮助。

如何在新窗口的React Portal中使用img？

0 个答案: