SOUtility.setSelectReadonly(“detail-0-widthDivi”, true); 修改为React 写法

在React中，如果你想要实现类似的功能，通常会涉及到状态管理或者props的传递。假设`SOUtility.setSelectReadonly`是一个设置组件属性为只读的方法，你可以将其转换成React的方式，比如：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { readonlyMode: false };
  }

  handleSetReadonly = (selector, isReadOnly) => {
    this.setState(prevState => ({
      ...prevState,
      [selector]: isReadOnly,
    }));
  };

  render() {
    const { detail_0_widthDivi } = this.state.readonlyMode; // 如果detail-0-widthDivi是从state获取的

    return (
      <div>
        {/* 使用this.handleSetReadonly来切换readonly状态 */}
        <button onClick={() => this.handleSetReadonly('detail-0-widthDivi', true)}>
          设置为只读
        </button>
        {/* 当detail-0-widthDivi是只读时显示相应的内容 */}
        {detail_0_widthDivi ? '内容已锁定' : '内容可编辑'}
      </div>
    );
  }
}

// 或者直接将readonly作为prop传递给子组件
function DetailComponent({ readonly }) {
  if (readonly) {
    return <span>内容已锁定</span>;
  }
  return <input />;
}

<YourComponent
  detail_0_widthDivi={true} // 初始化时是否设为只读
  onSetReadonly={({ selector, value }) => /* 通过回调更新其他组件 */}
/>

在这里，我们创建了一个状态`readonlyMode`用于跟踪元素的只读状态，并提供了一个事件处理函数`handleSetReadonly`来改变这个状态。在渲染时，我们可以根据`readonlyMode`的值来动态展示相应的内容。