Webpack打包React嵌入组件：如何获取script标签传递的参数传入组件

问题核心原因 #

你在init调用时传入的message已经被合并到config对象里了，但是现有代码没有将这个值传递给React组件，同时Widget组件本身也存在取值错误的问题。可以按照下面两种方案修改：

方案一：初始化直接通过props传递（仅初始化赋值，无需后续修改）

1. 修改apiHandler的init分支，渲染组件时将message作为props传入

case "init":
    config = Object.assign({}, config, params);
    window[widgetConfigName] = config;
    widgetComponent = React.createRef();
    // 这里把message通过props传给Widget
    ReactDOM.render(
        <Widget ref={widgetComponent} initMessage={config.message} />,
        document.getElementById(config.targetElementId)
    );
break;

2. 修改Widget组件，直接从props取值渲染

class Widget extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // 把初始化传入的message放到state里
            message: props.initMessage || null,
        };
    }
    render() {
        console.log(this.state);
        return (
            <div className="main_container">
                {/* 必须从state取值，直接写message会报错 */}
                {this.state.message}
            </div>
        );
    }
}

方案二：支持初始化赋值 + 后续动态更新message

如果后续还需要通过w1('message', '新内容')的方式修改组件内的message，就用这个方案：

1. 修改apiHandler的init分支，组件挂载完成后调用setMessage传入初始化的message

case "init":
    config = Object.assign({}, config, params);
    window[widgetConfigName] = config;
    widgetComponent = React.createRef();
    ReactDOM.render(
        <Widget ref={widgetComponent} />,
        document.getElementById(config.targetElementId),
        // 渲染完成的回调，传入初始化message
        () => widgetComponent.current.setMessage(config.message)
    );
break;

2. 给Widget组件补充setMessage方法，修正渲染取值

class Widget extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: null,
        };
        // 绑定this指向，避免调用时上下文错误
        this.setMessage = this.setMessage.bind(this);
    }
    // 新增setMessage方法，供外部调用更新state
    setMessage(newMessage) {
        this.setState({
            message: newMessage
        })
    }
    render() {
        console.log(this.state);
        return (
            <div className="main_container">
                {this.state.message}
            </div>
        );
    }
}

两种方案选一个就可以正常拿到初始化传入的"some string"参数了，如果需要后续动态修改message就选方案二。

内容的提问来源于stack exchange，提问作者Deepa